Vue-node.js，Webpack

vue-cli

安装nodejs， 使用淘宝加速器
npm是软件包管理工具

sudo npm install cnpm -g

安装vue-cli

sudo cnpm install vue-cli -g

cmd找到文件夹地址后

vue init webpack myvue

cd myvue
npm install

用idea打开这个项目

npm run dev

启动当前项目

-node的服务是单线程的
-node处理请求时是单线程，但是在后台拥有一个I/O线程池

node hello.js 即可执行js文件

什么是Webpack？

从本质上来说，webpack是一个现代的JavaScript应用的静态模块打包工具

前端模块化：AMD，CMD，CommonJS，ES6规范，目前能用的是ES6规范。
但是webpack可以支撑，后期可以转化，经过webpack生成新的代码，比如CommonJS进行转化，让浏览器支持运行。
并且模块化开发之后，处理模块之间的各种依赖，进行整合打包。
而且不仅仅js文件，我们的CSS，图片json文件等等，都可以别当做模块来使用。
grunt/gulp也可以打包
grunt/gulp的核心是Task

• 我们可以配置一系列task，并且定义task要处理的事务，例如ES6，ts转化，图片压缩，scss转css
• 之后让grunt/gulp来依次执行这些task，让整个流程自动化
• 所以grunt/gulp也被称为前端自动化任务管理工具
  什么时候使用gulp？
• 如果你的模块依赖非常简单，甚至没有用到模块化的概念
• 只需要简单的合并，压缩，就是用gulp即可
  什么时候使用webpack？
• grunt/gulp更加强调前端流程的自动化，模块化不是他的核心
• webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，都是附带的。

webpack依赖node环境，node环境为了执行很多代码，必须依赖各种的包
npm工具用来管理node下的各种包

npm install webpack -g
npm install webpack-cli -g

前端的模块化开发

vue-router

在项目中

npm install vue-router --save-dev

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
//显示声明使用VueRouter
Vue.use(VueRouter)

/* eslint-disable no-new */
new Vue({
     
  el: '#app',
  components: {
      App },
  template: ''
})