Vue CLI学习使用

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老师的资料

vue/cli 2.x版本构建项目时候的需要进行的选项.png

vue2.x项目构建之后的目录结构

coderwhy老师的这张图非常详细了

vue2.x项目构建之后的目录结构.png

vue3.x以上版本的项目构建之后的目录结构

vue3.x以上版本的项目构建之后的目录结构.png

使用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页面中。

就是这个过程

Vue渲染DOM元素的过程.png

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);
  }
})

1. Runtime-compiler

这个版本就和我们之前学习的时候的做法是一样的，就是我们之前将挂载的那个#app的div替换的那个template给抽成了一个组件，然后导入这个组件后再在Vue实例对象中注册这个组件。然后再在Vue实例中的template中使用这个组件。这时候在main.js中还需要对template给处理成render函数，这个效率就慢了。因为从.vue文件中导过来的组件对象中其实已经编译解析过render函数了，结果在这里又重复做了一遍。

//可以打印App对象验证一下
console.log(App)
//的确是一个对象，然后有个render属性

1. Runtime-only

这个版本就是直接有一个render函数，没有template了，也就是说它不会再做template编译的过程了，可以直接传入组件对象到createElement函数中进行渲染就完事儿了，效率比起前面那个高一些，而且体量也会小一些。

总结：如果你还使用template就选择效率低，体量大的Runtime-Compiler,如果使用.vue的文件进行组件化开发，而且不再使用template就使用效率高，体量小的Runtime-only

npm run build指令

npm run build.png

npm run dev指令

npm run dev.png