VueCli构建工具

---

title: VueCli构建工具
date: 2019-08-07 19:35:35
tags: [Vue.js,VueCli,webpack]
categories: Web前端

---

一、VueCli构建工具

如果我们所有的项目都像原来那样配置，难免过于繁琐。所以Vue官方提供了一个构建工具——VueCli来快速构建一个工具 。他可以帮助我们快速安装webPack的插件、loader等等配套的包。以及帮我们自动化构建配置目录等等。

二、VueCli 2.x

虽然在2018年8月尤雨溪发布了VueCli 3，但是由于现在还有大量的项目都是通过2.x.x版本构建的。所以在此需要记录一下VueCli 2的一些特性。

• 安装

  npm i @vue/cli -g
  

  虽然是3版本，如果想像2版本那样构建，需要使用他们提供的一个桥接工具

  npm i @vue/cli-init -g
  

• 构建一个Vue项目(2版本)

  vue init webpack 项目名称
  

• 接下来要你选择一些关键项

  ? Project name (test)   ##填写项目文件名称
  
  ? Project description (A Vue.js project)  ## 填写项目介绍
  
  ? Author MaoJacky <34392872+JackyM06@users.noreply.github.com>   ## 填写作者信息，默认读取全局git中的信息
  
  ? Vue build  ## 选择一个构建方式，初学者建议选择第一个，后文有介绍这两种方式的区别
    > Runtime + Compiler: recommended for most users
          Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
    
  ? Install vue-router? (Y/n) n   ## 是否加载Vue-router
  
  ? Use ESLint to lint your code? No   ## 是否使用一种js代码标准
  
  ? Setup unit tests No   ##是否安装单元测试
  
  ? Setup e2e tests with Nightwatch? (Y/n) n   ##是否安装端对端测试
  
  ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)   ##选择一种包管理工具
  > Yes, use NPM
    Yes, use Yarn
    No, I will handle that myself
  

• 生成后的目录

  │  .babelrc
  │  .editorconfig
  │  .gitignore
  │  .postcssrc.js
  │  index.html
  │  package.json
  │  README.md
  │
  ├─build
  │      build.js
  │      check-versions.js
  │      logo.png
  │      utils.js
  │      vue-loader.conf.js
  │      webpack.base.conf.js
  │      webpack.dev.conf.js
  │      webpack.prod.conf.js
  │
  ├─config
  │      dev.env.js
  │      index.js
  │      prod.env.js
  │
  ├─src
  │  │  App.vue
  │  │  main.js
  │  │
  │  ├─assets
  │  │      logo.png
  │  │
  │  └─components
  │          HelloWorld.vue
  │
  └─static
          .gitkeep
  

• 构建完成😄

三、VueCli 3.x

VueCli 3在原来基础上，减去了build文件夹等等，修改static文件夹为public。官方的话来说就是0配置，那么就让我们来瞅一瞅怎么用的吧

因为上面我们已经安装过了，所以我们只需要换一种构建方式即可。

• 构建

  vue create 项目名称
  

• 选择关键项

  ? Please pick a preset: ##选择你的配置方案，一般选择手动
    default (babel, eslint)
  > Manually select features
  
  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ##选择需要的关键项
  >(*) Babel
   ( ) TypeScript
   ( ) Progressive Web App (PWA) Support
   ( ) Router
   ( ) Vuex
   ( ) CSS Pre-processors
   (*) Linter / Formatter
   ( ) Unit Testing
   ( ) E2E Testing
   
   
   ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
   ##你要将的一些Babel配置信息保存到哪里，可以选择保存到Package.json，或自定义文件中去
   
   ? Save this as a preset for future projects? (y/N)y
   ##是否将你的这些配置信息保存下来，在未来能够使用
  

  注：如果要删除你所保存的个人配置信息项 ，你可以在C盘用户目录下的.vuerc文件中管理

  VueCli 3开始,还提供了一个vue ui命令，可以让你在可视化工具上进行修改你的项目配置

• 文件目录

  │  .browserslistrc
  │  .gitignore
  │  babel.config.js
  │  package-lock.json
  │  package.json
  │  postcss.config.js
  │  README.md
  │
  ├─public
  │      favicon.ico
  │      index.html
  │
  └─src
      │  App.vue
      │  main.js
      │
      ├─assets
      │      logo.png
      │
      └─components
              HelloWorld.vue
  

  注意：VueCli3构建的默认是Runtime-only方式的，可以在可视化工具中修改

四、关于Runtime方式的说明

4.1 问题说明

在VueCli 2中构建Vue项目时，有一个让你选择runtime-compiler or runtime-only。那这两者有什么区别呢？

先看一下分别使用两种方式构建的main.js

• runtime-compiler

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

• runtime-only

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h=>h(App)
})

• render使用方式

  render: function(createElement){
    // 1.普通用法 createElement(标签名，{属性}，[内容或者嵌套使用createElement])
    return createElement(
      'h2',
      {class:'box'},
      [
        '我是魔鬼',
        createElement('p',{class:'pp'},['hello'])
      ])
   // 2.真正的用法 createElement(导入的组件)
      return createElement(App)
  }

4.2 两种方式的区别

显然，前者是用我们熟悉的方式引用的App组件，而后者是以render函数的方式出现。这到底是怎么回事呢？

我们首先需要看一下Vue程序的过程

首先将template解析为ats-抽象语法树，然后使用vue实例中的render方法将ats编译为虚拟节点，然后建立vDom-虚拟Dom树，最终把vDom转换为我们在浏览器上所能看到的ui。

简单来说就是：

template-> ats->render->vDom->ui

那么,对于runtime-compiler方式来说，就是完整的用上述流程运行的。

而对于runtime-only来说，他是直接从render开始(render->vDom->ui)。显然这种方式的性能更高。

4.3 最后的问题

也许各位也会有一个疑问，那再子组件中挂载其他子组件岂不是都需要用render方法来做了？

我们来看看App.vue的内容

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

显然，在导出对象中我们并没有使用render方法来挂载子组件，这是为撒子呢🤔

看过我上一篇关于webpack的文章的童鞋应该知道，我们在使用webpack导入vue文件使安装了两个东西。

其中一个是为了支持.vue文件导入的vue-loader，还有一个是vue-template-compiler。而在VueCli构建中，这些它已经自动为我们安装了。

它能够在导出过程中将template编译为一个ast，我们只需要按原来的方式来挂载组件，最后形成一颗抽象语法树，在main.js中我们只需要使用render方法就可以。