vue-cli
https://cli.vuejs.org/zh/
vue-cli是vue的命令行工具，对于创建项目，安装各种组件，运行项目都极为方便，是在开发vue中的必备工具
vue-cli基于nodejs，所以要先安装nodejs。从nodejs官网下载二进制包，然后把nodejs的bin目录加到系统PATH，这样就由全局的npm命令可以调用了。
npm install -g @vue/cli #安装vue-cli
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install @vue/cli -g #或者用淘宝源
# vue --version 3.6.2 #安装完后，出现vue命令
vue init
搭建项目的第一步就是初始化目录，需要使用init，先安装
cnpm install -g @vue/cli-init
webpack
webpack是一个模块加载和打包工具，通过使用CommonJS语法把所有浏览器需要的静态资源做相应的准备，比如合并、打包。
它有loader和plugin机制。
loader用于载入各样静态资源，不只是js脚本，还有css-loader，style-loader
plugin对整个流程进行控制。
vue中也有vue-loader，用于把.vue文件转换成webpack包，和整个打包过程融合起来。
如果在本地创建一个简易项目时，一般使用webpack
git地址：https://github.com/vuejs-templates/webpack
使用webpack创建一个名为vue-test的项目
cnpm install -g @vue/cli-init vue init webpack vue-test cd vue-test/ npm run dev #安装init包， #初始化一个环境，取名vue-test，es，unit test，e2e包先不装，其他选项默认 #运行环境，然后就会由node起一个服务 --> DONE Compiled successfully in 4722ms I Your application is running here: http://localhost:8081
webpack-simple项目目录
webpack初始化的项目东西还是不少的，这里初始化一个webpack-simple，这个项目模板十分适合初学。
├─.babelrc // babel配置文件 ├─.gitignore ├─index.html // 主页 ├─package.json // 项目配置文件 ├─README.md ├─webpack.config.js // webpack配置文件 ├─dist // 发布目录 │ ├─.gitkeep ├─src // 开发目录 │ ├─App.vue // App.vue组件 │ ├─main.js // 预编译入口
package.json是vue项目的依赖管理文件，运行npm install时，就会安装这里的包
webpack.config.js是编译配置文件，采用了CommonJS的写法，entry节点配置了编译入口，output节点配置了输出
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
...
}
#这段entry和output配置的含义是：编译src/main.js文件，然后输出到dist/build.js文件。
#，执行npm run dev命令后，使用开发环境的话，在dist目录下不会生成build.js文件，开发环境下build.js是在运行内存中的
npm run dev #运行开发者环境，不会生成dist/build.js #开发者环境，nodejs会自己起一个web服务 npm run build #运行生产环境，生成dist/build.js和压缩文件build.js.map #生产环境，需要服务器提供nginx这样的http服务
webpack项目目录
初始化一个webpack项目模板，目录结构更复杂些。
在simple中，只有一个单一的App.vue，所有功能都在这里面。在webpack中，src目录下有了components目录，布局组件放在其中。
build后，dist目录下，把所有静态资源做了整合。
自动渲染
在dev环境下，webpack会监听src目录下的改动，有改动就会重新渲染
如果改了build和config的内容，则要手动重启node。