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 -> 真实domruntime-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笔记 (十) vue-cli2和vue-cli3的使用与对比】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 中
推荐阅读
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- 三十年后的广场舞大爷
- 一百二十三夜，请嫁给我
- vue-cli|vue-cli 3.x vue.config.js 配置
- 迷失的世界（二十七）
- 2020-04-07vue中Axios的封装和API接口的管理
- Android中的AES加密-下
- 二十年后的家乡
- 研学让生活更美好
- 《十二夜》观后感