什么是VueCLI

如果只是简单写几个Vue的Demo程序，那么不需要Vue CLI
如果在开发大型项目，需要使用Vue CLI
- 使用Vue.js开发大型应用时，需要考虑代码目录结构，项目结构和部署、热加载、代码单元测试等事情
- 如果每个项目都要手动完成这些工作，那无疑效率是比较低的，所以通常我们会使用一些脚手架工具来帮助完成这些事情
CLI是什么意思？
- CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架
- Vue CLI是一个官方发布的Vue.js项目脚手架
- 使用Vue CLI 可以快速搭建Vue开发环境以及对应的webpack配置

前提

Node
webpack

VueCLI3和VueCLI2的区别

vue-cli 3 与 2 版本有很大区别
- vue-cli 3 是基于 webpack 4 打造，vue-cli 2还是webpack 3
- vue-cli 3的设计原则是0配置，移除了配置文件根目录下的build和config等目录
- vue-cli 3提供了vue ui命令，提供了可视化配置，并且更加人性化
- 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

VueCLI的使用

安装

npm install @vue/cli -g --registry=https://registry.npm.taobao.org
#这里安装的是Vue CLI 3的版本，如果想要按照VueCLI2的方式初始化项目是不可以的
#指定一下源，不然太慢
npm install @vue/cli-init -g --registry=https://registry.npm.taobao.org
#Vue CLI 3和旧版使用了相同的vue 命令，所以Vue CLI2( vue-cli )被覆盖了。如果你仍然需要使用
#旧版本的vue init 功能，你可以全局安装一个桥接工具:
npm clean cache -force
#若安装失败，试着先使用这个命令清空缓存再安装

初始化项目

vue init webpack my-project
#脚手架2创建方式
vue create my-project
#脚手架3创建方式

runtime-compiler和runtime-only区别

内容主要区别在于scr文件夹下的main.js

runtime-compiler(Vue1)
```
new Vue({
  el:'#app',
  template:'<App/>'
  components:{
    App
  }
})
```
- template——>ast(abstract syntax tree)抽象语法树——>render——>virtual DOM——>UI

runtime-only(Vue2)

new Vue({
  el:'#app',
  render:h => h(App)
  //render:function(h){return h(App)}
  //其中的h其实是个方法，为createElement
  //普通用法：createElement('标签名',{标签的属性},['标签内容'])
  //如 createElement('h2',{ class:'box' },['我是h2标签'])
  //传入组件对象：createElement(component)
  //其中的组件对象已经没有template了，已经被vue-template-compiler解析了
})

render——>virtual DOM——>UI
效率更高，代码更少，大约少6KB

简单总结

如果之后的开发中，依然使用template，就需要选择runtime-compiler
如果之后的开发中，使用.vue文件开发，那么就使用runtime-only

VueCLI3配置文件的查看和修改

使用vue ui 命令，在图形化界面修改
node_modules ——>@vue ——>cli-service ——>lib ——>config
在根目录下新建vue.config.js文件，脚手架会自动合并该文件
```
module.exports={
  //...
}
```

文件路径的别名

脚手架2中配置

//config目录下的webpack.base.config.js
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  resolve:{
    alias:{
      '@': resolve('src'),//以后使用src时，可以用@替代，以后在复制路径的时候就不用修改了
      'assets': resolve('@/assets'),//在脚手架3中可以这么用
      'assets': resolve('src/assets')//在脚手架2中只能这么用
    }
  }
}
//在 import 中的路径 可以直接用
//但是在img标签中src之类的 必须在别名之前加一个 ~ 符号
//如 <img src="~assets/img/home.svg"/>

脚手架3中配置

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
}