Vue CLI学习
本文所有插图
来自bilibili vue课程 coderwhy老师
使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架
安装脚手架
cnpm install @vue/cli -g 脚手架是全局依赖的，所以-g
通过上面的指令会安装最新版本的脚手架，但是可能我们学习来说的话，要学一些底层的东西，所以我们也要学习一下脚手架2（cli 2）的一些东西
cnpm install @vue/cli-init -g通过这个指令拉取一个Vue CLI2的模板
使用脚手架构建项目
vue/cli 2.x是这样构建项目的
vue init webpack 项目名
vue 3.x是这样构建项目的
vue create 项目名
注意：项目名不能有大写，最好也不要有中文字符
构建之后会出现一系列选项
ESLint是指JS语法规范检查，不是很行，太影响体验了，一旦有一丢丢不合它规范的直接就编译报错了。
unit tests单元测试
Nightwatch，利用selenium或webdriver或phantomjs等进行自动化测试的一个框架，e2e,end to end表示端对端测试
vuex后面会学习
vue router，vue路由，后面学习再补充
babel，用于ES6转ES5
这是使用vue/cli 2.x版本构建项目时候的需要进行的选项，来自coderwhy老师的资料
vue2.x项目构建之后的目录结构
coderwhy老师的这张图非常详细了
vue3.x以上版本的项目构建之后的目录结构
使用vue/cli 3.x以上的版本构建项目的时候会让你是否保存本次配置，会保存到这里
"C:\Users\用户.vuerc"
//里面就长这样，配置就是在presets里
{
"useTaobaoRegistry": true,
"presets": {
"waigo": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {}
}
}
}
}
vue/cli 3.x以上的脚手架构建的项目中的文件比较简洁，通过@vue/cli-service工具来管理配置文件，然后把配置文件隐藏起来。
Runtime-only 和 Runtime-compiler的区别
我们先要知道Vue渲染DOM元素的过程
如果是对于template，那么就是这么个过程。Vue先是把template给解析parse成一个ast，这个叫做抽象abstract 语法syntax树tree,然后再将ast给编译成render函数。执行render函数，会生成虚拟DOM，然后再将虚拟DOM给渲染到UI页面中。
就是这个过程
Render函数
这个函数Vue底层在调用的时候会向它传入一个createElement函数，这个函数可以传三个参数，像这样调用，产生DOM元素。
render:function(createElement){
return createElement("h2",{class:"box"},["hello world",createElement("button",["按钮"])]);
}
还能这样调用，传入一个组件对象，会根据传入的组件渲染出一个组件元素。render就是渲染的意思。
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//render函数
render:function(createElement){
// return createElement("h2",{class:"box"},["hello world",createElement("button",["按钮"])]);
return createElement(App);
}
})
-
Runtime-compiler
这个版本就和我们之前学习的时候的做法是一样的，就是我们之前将挂载的那个#app的div替换的那个template给抽成了一个组件，然后导入这个组件后再在Vue实例对象中注册这个组件。然后再在Vue实例中的template中使用这个组件。这时候在main.js中还需要对template给处理成render函数，这个效率就慢了。因为从.vue文件中导过来的组件对象中其实已经编译解析过render函数了，结果在这里又重复做了一遍。
//可以打印App对象验证一下
console.log(App)
//的确是一个对象，然后有个render属性
-
Runtime-only
这个版本就是直接有一个render函数，没有template了，也就是说它不会再做template编译的过程了，可以直接传入组件对象到createElement函数中进行渲染就完事儿了，效率比起前面那个高一些，而且体量也会小一些。
总结：如果你还使用template就选择效率低，体量大的Runtime-Compiler,如果使用.vue的文件进行组件化开发，而且不再使用template就使用效率高，体量小的Runtime-only
npm run build指令
npm run dev指令
