vuecli 脚手架（版本2和版本3/4）

(一) 安装Vue CLI

Vue CLI可以快速搭建Vue开发环境以及对应的webpack配置。

https://cli.vuejs.org/zh/guide/

1. 安装node，版本要大于8.9

2. 安装npm（Node.js自带了软件包管理工具npm）
   cnpm安装
   由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
   你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
   npm install -g cnpm --registry=https://registry.npm.taobao.org
   这样就可以使用 cnpm 命令来安装模块了：
   cnpm install [name]

3. 安装webpack

   cnpm install webpack@3.6.0 -g
   

4. 安装Vue CLI（全局安装，本文档写的时候vue是4.3.1）

   cnpm install -g @vue/cli
   

5. 如果需要可以使用如下命令，拉取Vue CLI的2.X模板（旧版本）

   cnpm install -g @vue/cli-init
   

(二) Vue CLI 3

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

[1]. 初始化项目

进入到要放项目的目录中，创建my-project项目

vue create my-project

[2]. 配置

1. ? Please pick a preset: (Use arrow keys)：选择默认配置还是手动配置

   default (babel, eslint)
   Manually select features

   选择第二个选项后，设置如下：（空格，取消选中选项；回车，选择完成）
   

2. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)：选择第一个，将配置文件放入到独立的文件中

   In dedicated config files
   In package.json

3. Save this as a preset for future projects? (y/N)：是否保存1中自己的选择，在将来使用时直接按照1来配置。
   选择y，然后需要给配置命名，下次安装可以直接使用

   在C:\Users\Administrator目录下有一个.vuerc文件，可以将自己命名的配置给删除了。

[3]. 目录解析

[4]. 在本地服务器运行

进入到项目目录然后运行如下代码

npm run serve

[5]. 修改vue配置

1. 在vue ui中配置

• 在命令行窗口中(cmd), 启动本地服务器，

  vue ui
  

• 在图形页面，点击导入，选择项目所在的根目录，点击“导入这个文件夹”按钮。
  

• 在左边导航栏中选择配置按钮，然后在右边点击 Vue Cli，可以对项目进行配置。
  

2. 自己创建vue.config.js
修改配置时，在项目的根目录中(与package.json同级)添加一个vue.config.js文件，内容如下：(具体的配置项，https://cli.vuejs.org/zh/config/)

module.exports = {
	...
}

(三) render 函数解析

Runtime-only模式下，main.js中有一个render函数，render原型如下，

//使用箭头函数可以简写为如下, h就是createElement函数
//new Vue({render: h => h(App)}); 

new Vue({
	...
	render: function(createElement){
		return createElement(App); //App代表一个组件
	}
});

createElement函数(生成元素)

//1. creagteElement('标签',{标签属性},[标签中的内容]);
//创建一个类名为box内容为hello,world的h2标签
createElement('h2', {class:'box'}, ['hello, world!']);

//2.嵌套render函数
//创建一个h2和一个按钮
createElement('h2', {class:'box'}, ['hello, world!', createElement('button', ['按钮'])]);

//3. 传入组件对象,
//.vue文件也是一个组件，App代表一个组件
createElement(App)

(四) 扩展

[1]. Vue CLI 2

前提是拉取了Vue CLI的2.X模板。

1. 初始化项目

   进入到项目根目录下，初始化项目

   vue init webpack my-project
   

2. 配置项

• Rroject name 项目名称一般和文件夹的名称保持一致
• Project description 项目简介
• Author 作者
• Vue build 选择模式，暂时选择第一个 Runtime + compiler
• Install vue-router 是否使用路由，暂时选择n
• Use ESLint to lint your code? 这个是对代码进行一些规范，如果代码写的规范选择 n，不规范选择y，如果选择y，会让你选择不同公司的规范
• set up unit tests 单元测试 选择n
• setup e2e tests …? 端到端测试，选择n
• should we run …? 选择yarm 还是 npm 安装，这里选择的是npm
  

3. 目录解析
   可以通过https://blog.csdn.net/kouzuhuai2956/article/details/106119674来更详细的了解目录中的文件的作用。
   
4. 在本地服务器运行
   在控制台中，进入到项目目录下即package.json文件所在目录，输入以下代码，然后在浏览器中输入localhost:8080

npm run dev

也可以将build/config/index.js中的autoOpenBrowser的值改为true,当执行上边的代码时会自动使用浏览器打开页面。出现如下页面说明你成功了。

[2]. Runtime-Compiler和Runtime-only的区别

• 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
• 如果你之后的开发中，使用的是.vue文件开发，那么可以选择Runtime-only
• runtime-compiler的编译过程为：template->ast(abstranct syntax tree抽象语法树)->render->virtual dom->UI
• runtione-only的编译过程为：:render->virtual dom->UI
  
• runtione-only中.vue文件中的template由vue-template-compiler解析文件解析，vue-template-compiler解析文件是会将整个.vue文件给解析