Vue CLI

2020-07-10

在开发大型项目,需要使用 Vue CLI ，那什么是 CLI?

CLI是 Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack配置。

Vue CLI使用前提 —— Node 、Webpack、npm

因此首先检查是否安装了 NodeJS 和 Webpack。然后检查 Node 和 NPM 的版本，Node环境要求8.9以上或者更高版本。

cnpm安装国内镜像

国内直接使用 npm 的官方镜像是非常慢的，推荐使用淘宝 NPM 镜像。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

1	cnpm install [name]

1 Vue CLI的使用

1.1 安装Vue脚手架

安装 Vue CLI3 的版本

1	npm install -g @vue/cli

如果想在 Vue CLI3 基础上用 Vue CLI2 ，官网中介绍了 拉取 2.x 模板 (旧版本)，可以全局安装一个桥接工具：

1
2
3

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI2初始化项目

1	vue init webpack my-project

Vue CLI3初始化项目

1	vue create my-project

2 Vue CLI2详解

2.1 Vue CLI2 初始化项目

在CLI 3 上拉取 2.x 模板 (旧版本)，初始化项目，之后会填写一系列信息。信息如下：

1.根据名称创建一个文件夹，存放之后项目的内容，该名称会作为**默认**的项目名称，但是不能包含大写字母
2.项目名称，不含大写（项目名称和文件夹不是一个东西）
3.作者信息，默认从 git 中读取信息
4.Runtime + Compiler（目前使用这个） 或者 Runtime-only（这个更推荐）
5.是否配置 vue-router
6.Eslint检测代码规范
7.单元测试
8.e2e测试（end to end）
9.选择用 yam 或者 npm 安装

目录结构详解

以 package.json 为入口，可以先看 script 里面的命令。build 和 conig 文件夹都是管理一些配置的，可以自己修改。比如我需要每次运行本地服务器都要打开浏览器时，修改 index.js 里面的 autoOpenBrowser 为 true。

取消Eslint检测代码规范

在 config/index.js 里面修改 useEslint: true,

2.2 Runtime-Compiler 和Runtime-only

下面是官方文档 Runtime-Compiler 和 Runtime-only 使用场景介绍

也就是如果你需要使用template，就需要选择 Runtime-Compiler ，如果使用的是 .vue 文件夹开发，那么可以选择 Runtime-only 。

上面两种形式有什么区别呢？

从代码上看，Runtime-only 是直接将 App 模块用箭头函数传给 render，看起来代码更简洁了。

但是有一个疑惑，App 应该也是模板，在App.vue 里面也是有 template的，Runtime-only 下是如何编译成功的。

这一切都是通过 vue-template-complier 实现的，他可以用来解析模板。App.vue 最终会被编译成一个对象，在这个对象里面 template 已经被渲染为 render 函数

下图是在入口打印 App，可以看出它是一个对象，里面没有 template，只要 render。

接下来从 vue 程序运行过程和 Render 函数来解释着两种情况

1）Vue 中的模板如何最终渲染成真实 DOM

程序运行过程

Runtime-Compiler + Runtime-only : template — ast — render — vitural DOM — 真实 DOM
Runtime-only :render — vitural DOM — 真实 DOM

Runtime-only 里面没有 template，不需要进行编译，代码量更少。

2） render函数的使用

render函数有两种使用方法：

1）传入标签： return createElement('标签', { 相关数据对象（可以不传） }, [便签里面的内容 , 可以再传一个标签])

2）传入一个组件对象：这时候的方法就和 Runtime-only 下一样，只是在 Runtime-only 里面箭头函数进行了简写，并且用 f 替换了 createElement 方法。

const cpn = Vue.component('cpn', {
    template: `<div>我是cpn组件 {{message}}</div>`,
    data() {
        return { message: 'lalal' }
    }
})
new Vue({
    el: '#app',
    render: function(createElement) {
        // 1. 使用方式一
        // 1.1 使用render 函数基本使用
    return createElement('div', { class: 'box' }, ['future'])
        
        // 1.2 嵌套render 函数
     return createElement('div', { class: 'box' }, ['future', createElement('button', ['按钮'])])
        
        // 方法二：传入一个组件对象
        return createElement(cpn)
    }
})