vue-cli2和vue-cli3脚手架介绍和深入理解

一、vuecli的介绍和安装

1、介绍

CLI是Command-Line Interface（命令行界面）俗称脚手架

Vue CLI使用的前提 Node.js、webpack（npm install webpack -g全局安装）

2、安装vue脚手架（cli3）

npm install -g @vue/cli   

-g就是全局安装（global）

注意：此时安装的是最新版本，如果需要想按照vue cli2的方式初始化项目时是不可以的，需要拉去2.x模板，使用旧版本的vue-init功能，需要全局安装一个桥接工具

npm install -g @vue/cli-init
#'vue init'的运行效果将跟'vue-cli@2.x'相同

3、初始化项目（init初始化）

①vue cli2中

vue init webpack 项目名称

②vue cli3中

vue create 项目名称

二、vue cli2的目录结构解析

1、首先看package.json文件

谷歌的v8引擎：本来是js->字节码->浏览器，现在js->二进制代码

node可以直接执行js代码，是执行js的底层支撑。所以在终端中可以直接用node xxx.js 来执行js文件。

①其中"build": "node build/build.js"也就是说在npm run build时在执行build.js文件

在build.js中有引导一些配置文件的合并等等东西

②其中"dev": “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”

配置开发服务器工具–inline：页面实时刷新，–progress打印监听进程，–config指定需要找的配置文件

2、config文件夹中是定义一些需要用到的变量

3、node_modules文件夹里是当前项目很多依赖node的包

4、static文件夹中的资源发布时会原封不动地（不会重新命名或者改格式）复制到dist文件夹中

里面有一个git相关的文件

5、在根目录中

①babelrc文件

是关于babel-loader生产的一些配置文件（js语法转换器）

②editorconfig文件

对代码进行统一

③eslintignore文件

eslint代码规范检查需要忽略的文件进行配置

④gitignore文件

需要忽略上传服务器的文件进行配置

⑤index.html

是打包时的模板

三、安装CLI错误和ESLint规范

eslint规范很严格，如果需要关闭eslint，需要在config文件夹下找到index.js，找到useEslint把它修改为false

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

1、main.js文件的区别

template->ast(抽象语法树)->render->virtual dom->真实dom(UI)

①runtime-compiler:（没必要用这个）

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
//template->ast(抽象语法树)->render->virtual dom->真实dom(UI)

②runtime-only:（用到更多，更高效）

.vue中发布时都是没有template的，都是被解析成了render函数来处理。也就是说，会把所有的vue组件由vue-template-compiler解析成的对象(render函数)，并且对象里没有template相关的东西，从而提升性能。（注意：其中vue-template-compiler是针对vue组件’.vue文件’解析成render）

new Vue({
  el: '#app',
  render: h => h(App)//箭头函数
})
同理：
new Vue({
  el: '#app',
  render:function(createElement){//render：渲染
      //1.createElement('标签名',{标签的属性},['标签内的内容']) -> 会直接把el：'#app'对应的部分替换成<标签名 上面的属性>标签内的内容</标签名>
      //2.在creatElement()传入组件对象，还不需要在index.html中传入标签就能使用，区别于runtime-compiler。此时.vue文件中的template已经不存在了，是由之前安装的vue-template-compiler，此时再用这个.vue文件是已经是被解析成了render函数，所以没有template的存在
      return createElement(App)
  }
})
//render->vdom->UI
//结论：1.这个性能更高2.文件代码量更少，没有解析部分的代码

五、vueCLI3创建目录和目录结构

1、vue-cli3和2版本有很大区别

①vue-cli3是基于webpack4打造，vue-cli2还是webpack3

②vue-cli3的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

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

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

2、创建vueCLI3

vue create 项目名称

3、目录结构

①node_modules

通过npm安装的包都放这里

②public

这个文件就相当于之前cli2中的static文件，发布的时候这里面的文件不进行处理，一起全部发布出去

③src

main.js文件中

new Vue({
  render: h => h(App),
}).$mount('#app')
//他们两个没区别，在vue源码中就会去判断执行$mount('#app')，有el也会执行$mount('#app')。而且el会被render替换掉
new vue({
    el:'#app',
    render: h => h(App)
})

④.browserslistrc文件

对浏览器适配版本控制

⑤.gitignore文件

对需要忽略发布的文件配置，有些东西不想上传到服务器

⑥babel.config.js

配置babel相关的东西

⑦package-lock.json

对package.json文件中的依赖版本的控制

4、暂时跑项目

npm run serve

5、编译构建项目

npm run build

六、VueCLI3中webpack配置文件的查看和修改

1、方式一：图形化配置界面

启动配置服务：

vue ui

2、方式二：找到隐藏的webpack配置

此配置在node_modules/@vue/cli-service的webpack.config.js中

在当前文件夹的lib文件夹中还有很多配置

3、方式三：确实需要修改配置

需要在当前项目根目录下创建一个文件vue.config.js(固定的名字不要随便改)

module.exports = {
//这里写一些配置，之后这些配置就会和@vue文件夹下的配置进行自动的合并
}