2.1 VUE CLI脚手架

一、什么是脚手架

CLI 是command-line interface ，翻译为命令行界面，俗称脚手架

二、使用前提

1、node NPM webpack

三、安装脚手架

1、安装基础

npm/yarn node推出的早期npm不好用，其他大公司推出yarn。但是后面npm升级优化，同样好用

yarn global add @vue/cli

拉取npm install @vue/cli-init 2版本的脚手架模板

脚手架2初始化项目 vue init webpack my-project

脚手架3初始化项目 vue creat my-project

2、脚手架2的过程

创建文件夹名称-》创建项目名称-》创建项目描述-》创建作者(默认读取C:\Users\Administrator全局gitconfig)-》怎么构建（RC 还是RO）-》是否安装路由vuex->是否使用eslint（对ES/js代码进行限制,js不规范编译就报错）（选是的话，继续选择一个规范）-》安装单元测试（断言，测试模块）-》e2e（端对端测试，自动化测试框架nightwatch,可以和selenlum结合）-》用什么命令管理包npm 或yarn

3、解读初始化的脚手架2

node可以直接执行js文件，在之前js文件只能在浏览器执行。 node现在可以直接提供环境。node本身使用C++开发，里面有一个V8引擎。chrome比火狐打开网页快，就是因为V8引擎。

js-》字节码-》跑在浏览器。V8引擎跳过字节码这个环节，翻译成二进制代码，可以直接运行。目前现在所有浏览器都采用后面方案，因此运行速度都快

babellrc，适配市场份额》1%,最后2个版本，ie>8的支持适配。只针对stage-2阶段进行转化

editorconfig 编码规范的统一说明

package ^可以变最后一个版本数字 ~可以变最后2位版本数字

四、Vue程序运行过程

template---解析->ast(抽象语法树 abstract syntax tree)--编译-->render函数--翻译--》虚拟DOM---渲染-》UI，真是DOM

五、runtime-compiler 和runtime-only的区别

runtime-compiler

就是template->ast->render->vdom->UI

runtime-only(性能更好，下面代码量更少)

就是render->vdom->UI

那么.vue文件中的template是由谁处理的呢？

是由vue-template-compiler

六、CLI3和CLI2的区别

。cli3是基于webpack4打造，cli2是基于webpack3

。cli3的设计原则是“0配置”，移除配置文件根目录下的build和confi目录

。提供了vue ui命令，提供可视化配置，更加人性化

。移除了static文件夹，新增了public文件夹，index.html移动到public中

七、CLI3创建项目

vue create 项目名

选择manually->空格键选中配置-》配置放独立文件还是放package?(选独立)-》为以后项目保存现在的配置(下一次可以选)

···

删除保存的配置的话还是在C:\Users\当前登录用户名.vuerc文件中

···

new Vue().$mound("#app") =new Vue({el:"#app"})

cli3的webpack配置可以看\node_modules@vue\cli-service\webpack.config.js.如果要自己写配置的话，可以自己写一下vue.config.js, 文件里面写上module.export{} ,会自动刚才文件的配置合并起来

修改配置：1、启动一个vue ui 服务（脚手架里面内置） -》浏览器图形化导入项目

2、找到项目文件去修改 3、自定义配置文件