vue笔记 (十) vue-cli2和vue-cli3的使用与对比

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

vue-cli的使用前提，已安装node和webpack。

vue-cli2

安装

$ npm install -g @vue/cli

注意:上面安装的是vue-cli3（现在是4）的版本，如果需要想按照vue-cli2的方式初始化项目，还需要拉取 2.x 的模板:

# 拉取2.x模板
$ npm i @vue/cli-init -g

或指定版本号安装（2.x）：

$ npm install -g vue-cli@版本号

初始化项目

$ vue init webpack myproject

初始化配置选项：

vue-cli目录详解:

runtime-compiler和runtime-only

用vue cli2创建项目时，会碰到让我们选择runtime-compiler模式还是runtime-only模式:
两种选择创建出来的main.js文件区别:

h是Vue中的一个内置函数createElement的缩写，是创建虚拟DOM的。

template渲染成页面过程：

template会被解析成ast，再被编译成一个render函数，这个render函数会构造一个virtual dom(虚拟dom)，最后virtual dom会转换为真实dom，进行页面展示。

runtime-compiler的步骤：

template -> ast -> render -> virtual dom -> 真实dom

runtime-only的步骤：

render -> virtual dom -> 真实dom

可以看出runtime-only相比runtime-compiler运行效率高、源代码量更少。

runtime-only版本的main.js中的template会被render函数代替掉，其组件中的template是怎么被编译呢？这是因为组件会调用vue中的一个包：vue-template-compiler，项目运行时，这个包会自动将组件中的template转化为render函数。

vue-cli3

安装:

$ npm install -g @vue/cli

或指定版本安装：

$ npm install -g @vue/cli@版本号

初始化项目:

$ vue create vuecli3test

vue-cli3初始化配置选项：

vue-cli3目录详解：

vue-cli 3 与 vue-cli2 区别：

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