# vue-cli脚手架

# 一、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.文件代码量更少，没有解析部分的代码

# 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文件夹下的配置进行自动的合并
}