Vue-CLI（vue脚手架）安装的详细过程包括vue-cli2和vue-cli3

Vue-CLI

Vue-CLI：命令行工具，用于快速生成Vue项目基础架构，简化程序员创建Vue项目的过程。

CLI的意思：

• CLI是Command-Line Interface，翻译为命令行界面,但是俗称脚手架.
• Vue CLI是一个官方发布vue.js项目脚手架
• 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.

（一）安装vue-cli前的准备

安装vue-cli之前要先安装node和webpack

vue-cli2与vue-cli3区别

• vue-cli 3是基于webpack 4打造，vue-cli 2还是webapck 3
• vue-cli 3提供了vue ui命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
• vue-cli3的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

（二）安装vue-cli2

全局安装

npm i -g @vue/cli-init

初始化vue-cli2的项目

vue init webpack my-project

运行初始化命令的时候会有几个选项:
1）Project name (my-project)：项目名称不能大写
2）Project description (A Vue.js project)：对项目的描述
3）Author作者（你的名字)：作者的信息，如果不填会默认从git中读取信息
4）Vue build (Use arrow keys)：

• Runtime + Compiler: recommended for most users
• Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

选择这两个的区别是src下的main.js中代码略微不同
Runtime + Compiler（运行程序+编译器）:

new Vue({
     
  el: '#app',
  components: {
      App },
  template: ''
})

Runtime + compiler 中 Vue 的运行过程:

• 首先将vue中的模板进行解析解析成abstract syntax tree （ast）抽象语法树
• 将抽象语法树在编译成render函数
• 将render函数再翻译成virtual dom 虚拟dom
• 将虚拟dom显示在浏览器上

Runtime-only（仅运行程序）:

new Vue({
     
  el: '#app',
  render: h => h(App)
})
//h函数：
简单地说就是 h 函数就是 createElement 函数，用于创建 虚拟DOM
createElement('标签'，{
     标签的属性},['内容'])
例：createElement('h2'，{
     class:'box'},['hhhhh']) ---> <h2 class="box">hhhhh</h2>

Runtime-only中 Vue 的运行过程:

• 将render函数再翻译成virtual dom 虚拟dom
• 将虚拟dom显示在浏览器上

所以说runtime-only的性能更高，代码量更少

5）Install vue-router?(Y/n)：是否安装Vue路由
6）Use ESLint to lint your code?(Y/n)： 是否用ESLint检查代码规范
如果选择yes : Pick an ESLint preset(Use arrow keys)：选择一个预置ESLint(使用箭头键)

• Standard (https://github.com/standard/standard)
• Airbnb (https://github.com/airbnb/javascript)
• none (configure it yourself)

7）Set up unit tests (Y/n) :是否使用单元测试
8）Setup e2e tests with Nightwatch?(Y/n)：e2e测试，end to end ，安装Nightwatch,是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架
9）Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)：

• Yes, use NPM
• Yes, use Yarn
• No, I will handle that myself

按照这个顺序建好文件后目录为：

每个文件夹所代表的意思：

最后启动项目：

npm run dev

（三）安装vue-cli3

全局安装

npm install  @vue/cli -g

初始化vue-cli2的项目

vue create my-project

运行初始化命令的时候会有几个选项:
1）选择配置方式 ：

2）如果选择自己配置则：

选择自己需要的配置空格选中或取消
3）对应的配置单独生成文件还是放在package.json中

4）要不要把自己所选择的配置保存下来

按照这个顺序建好文件后目录为：

每个文件夹所对应的意思：

最后运行项目：

npm run serve