Vue CLI

一、Vue CLI介绍

如果你只是简单写几个vue的程序，那你不需要Vue CLI；
如果你在开发大型应用时，并且必然需要使用Vue CLI。

使用vue.js开发大型应用时，我们需要考虑代码目录结构，项目结构和部署、热加载、代码单元等事情。如果每个项目都要手动完成这些工作，那无疑效率比较低，所以通常我们会使用一些脚手架工具来帮助我们完成这些事情。

CLI是什么意思？

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

Vue CLI使用前提
安装nodejs和npm，其中node环境要求8.9以上。

二、Vue CLI的使用

1、安装Vue CLI3的脚手架

npm install -g @vue/cli

如果想使用Vue CLI2脚手架，使用下面指令

npm install @vue/cli-init -g

若出现问题，可能你会需要将C:\Users\用户名\AppData\Roaming中的npm-cache文件删除后重新执行脚手架命令。
2、查看安装的脚手架版本

vue --version

3、初始化项目
Vue CLI3初始化项目

vue init webpack my-project

Vue CLI2初始化项目

vue create my-project

三、VueCLI2初始化项目过程

输入下面的命令进入初始化：

vue init webpack 项目名称

然后根据提示进行配置，具体如下面这张图。

生成的目录结构详解

如果你不想使用Eslint，可以打开config/index.js文件，把useEslint置为false即可。

四、runtime-compiler和runtime-only的区别

当你执行下面两个命令时，会分别生成runtime-compiler和runtime-only两个项目

vue init webpack runtime-compiler

vue init webpack runtime-only

首先看看这两个项目中的main.js文件有什么不同？

下面是runtime-compiler的内部运行机制，可以看出流程是从template->ast->render->vdom->UI

而runtime-only是从render开始，流程是render->vdom->UI。可以看出runtime-only性能更高，代码量更少。

我们在前面初始化脚手架的时候有选择runtime-compiler还是runtime-only，提示runtime-only会比runtime-compiler多6KB，多的这6KB就是前面template->ast-> ,解析和编译的代码量。

如果你需要在客户端编译模板，（例如，向template选项传入一个字符串，或者需要将模板中的非DOM的HTML挂载到一个元素），你需要带有编译器的版本，因而需要完整构建版本。
在使用vue-loader时，.vue文件中的模板会在构建时（build time）预编译（pre-compile）为javascript。最终生成的bundle你不再需要编译器（compiler），因此可以直接使用只含有运行时的构建版本（runtime-only）。

由于只含有运行时构建版本（runtime-only）比完整构建版本（full-build）轻量大约30%。你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本，则需要在打包器中配置别名。

由于运行时版本的构建比其全面版本的重量轻约30%。因此你可以随时使用它，如果你仍然希望使用完整版本，则需要在捆绑程序中配置别名。

简单总结

如果在之后的开发中，你依然使用template，就需要选择runtime-compiler；
如果你之后的开发中，你使用的是.vue文件开发，那么可以选择runtime-only。

五、认识Vue CLI3

如果你执行npm run build，底层会做哪些处理？可以看看下面这张图。

如果你执行npm run dev，底层会做哪些处理？可以看看下面这张图。


使用下面的命令，创建Vue CLI3项目

vue create 项目名称

创建的具体步骤如下：

创建后的项目目录结构如下：

在终端输入下面的命令，启动配置服务器，进入项目管理界面

vue ui

如下图所示

你可以在管理界面中找到该项目所采用的插件

以及项目依赖

这样就可以以图形化的方式来管理我们项目相关的配置。

项目的另一种启动方式如下

你可以通过这种方式来查看项目的启动时间，以及速度统计，加载依赖项所占用的时间。