Vue CLI2与Vue CLI3的使用，以及runtime compiler和runtime only的区别

一.什么是Vue CLI

1. 当在开发大型项目时，必然需要使用Vue CLI，俗称脚手架
2. 我们使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

二.Vue CLI的使用

• 安装Vue脚手架,在终端输入指令npm install -g @vue/cli，此时安装的是Vue CLI3版本
• 如果我们希望在脚手架3的基础上仍然可以使用脚手架2，则需要在终端接着输入npm install @vue/cli-init -g,完成后我们就可以既用脚手架2又可以使用脚手架3
• Vue CLI2初始化项目，在终端输入vue init webpack 项目名称
• Vue CLI3初始化项目，在终端输入vue create 项目名称

当完成以上初始化项目指令后，系统会弹出一些信息让我们输入，一旦输入完成，将自动创建文件夹

如果在上图填写信息的过程中，出现填写错误，我们可以在config文件夹下的index.js文件中，找到对应的信息进行更改即可。

• 对于ESlint规范，通常根据项目要求来选择yes/no，一般选择no

三.runtime compiler和runtime only的区别

两者区别体现在main.js文件中：在complier的main.js文件中，Vue实例内部需要先注册组件，然后设置模板；而在only的main.js文件中，直接用render函数代替了这两个过程。

• runtime compiler中包含template模板，它的解析是将：template->ast(抽象语法树)->render函数->virtaul dom->真实DOM
• 而runtime only中，是直接将render函数->vdom->真实DOM,所以相比之下，runtime only的性能更高且代码量更小

1.render函数的普通用法：变量名('标签',{标签的属性},['内容'])

new Vue({
	el:"#app",
	render: function (createElement) {
		return createElement('h2',{class='box'},['你好啊'])
		// 即相当于<h2 class='box'>你好啊</h2>
	}
})

2.传入组件对象

new Vue({
	el:"#app",
	render: function (createElement) {
		return createElement(cpn)
	}
})

• 我们知道runtime only是不能解析template模板的，而.vue文件中是包含template的，那么.vue文件中的template是由谁处理的呢？
• 答：是由vue-template-compiler。在webpack中如果想运行.vue文件，就一定需要npm安装vue-template-compiler,而它可以将所有的template转成render函数，因此在开发中所有的vue组件内部都会将template转化。

四.Vue CLI3

在运行Vue CLI3脚手架时，用npm run serve执行，可以在package.json文件中查看
且在main.js文件中，Vue实例的内容会发生变化：

这里的.$mount(’#app’)实际上和el:’#app’差别不大

1.在脚手架3中，隐藏了配置文件（config和build文件夹），故如果希望找到配置文件，可以在终端执行npm ui，此操作将打开一个配置服务器

2.或者我们可以在node_modules文件夹下@vue文件夹内找到隐藏的配置文件

3.如果确实需要改一些配置，也可以自己在根目录下创建vue.config.js文件，在文件中，通过module.exports={}来修改配置,文件名字不能随便起

• 当修改完成后，需要在终端执行git add . 再git status 最后git commit -m '修改配置文件'