Vue.js_35_ 脚手架（Vue CLI）

本系列博客汇总在这里：Vue.js 汇总

---

源码工程文件为：

一、什么是 Vue CLI？

如果你只是简单写几个 Vue 的 Demo 程序, 那么你不需要 Vue CLI。如果你在开发大型项目, 那么你需要, 并且必然需要使用 Vue CLI。使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

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

脚手架长什么样子?

二、Vue CLI 使用前提 - Node

安装 NodeJS，可以直接在官方网站中下载安装。

检测安装的版本：

• 默认情况下自动安装 Node 和 NPM
• Node 环境要求 8.9 以上或者更高版本
  

什么是 NPM 呢?

NPM 的全称是 Node Package Manager。是一个 NodeJS 包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准，后续我们会经常使用 NPM 来安装一些开发过程中依赖包。

cnpm 安装

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

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

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

cnpm install [name]

三、Vue CLI 使用前提 - Webpack

Vue.js 官方脚手架工具就使用了 webpack 模板，对所有的资源会压缩等优化操作。它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

Webpack 的全局安装

npm install webpack -g

这个步骤显然我们就做过了。

四、Vue CLI 的使用

1、安装 Vue 脚手架

官网安装教程

npm install -g @vue/cli

拉取 2.x 模板（旧版本）

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具，上面安装的是 Vue CLI3 的版本，如果需要想按照 Vue CLI2 的方式初始化项目时是不可以的。如果想要在脚手架 3 的基础上继续使用脚手架 2，就必须拉取一个脚手架 2 的模板，这样就可以同时使用脚手架 2 和 3 了，我们这里就采用这种方式。

npm install -g @vue/cli-init

2、Vue CLI2 初始化项目

vue init webpack my-project

vue init webpack vuecli2test

目录结构详解

注意：如果项目开启了 ESLint 检测代码规范，在写代码的时候就必须严格按照这个规则来进行，少空格或者多分号都是会报错的，如果想要关闭 ESLint 检测代码规范，按下图操作即可。

Runtime-Compiler 和 Runtime-only 的区别

项目初始化好以后，我们主要来对比两个项目里面的 main.js 文件。

为什么存在这样的差异呢？

我们需要先理解 Vue 应用程序是如何运行起来的，Vue 中的模板如何最终渲染成真实 DOM，我们来看下面的一幅图。

通过上图我们可以看到两者的具体流程大致如下

• runtime-compiler
  template -> ast -> render -> vdom -> UI

• runtime-only
  render -> vdom -> UI

显然，使用 runtime-only 性能更高，并且代码量会更少，所以当我们了解它们的区别以后，就应该知道应该使用 runtime-only 较好，官方给出的解释如下。

其次，我们需要理解 render 函数的使用。

上面我们斌没有使用组件 App，只是展示了 render 函数的普通用法，render 函数也是可以直接传入对象的，那么我们是不是就可以直接传入组件对象了呢？是的。


实际原理如下：

同时由于 vue-template-compiler 是属于开发时的依赖，那么自然我们在运行项目的时候就不会有 template 属性了，其内部已经帮我们全部转为 render 函数了。

简单总结

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

3、Vue CLI3 初始化项目

vue-cli 3 与 2 版本有很大区别，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 中。

vue create my-project

由于攥稿初期，已经有 Vue CLI4 了，我们就不再看 Vue CLI3 了。

4、Vue CLI4 初始化项目

vue create my-project

vue create vuecli3test

由于我们在上面的操作中选择了保存当前配置，所以下次初始化项目的时候就可以选择按照我们之前的配置进行安装了。

要是我们想要删除之前我们自己保存的配置，方法如下。

项目初始化成功以后的目录结构。

项目运行

npm run serve

我们再来看一看 main.js 里面的内容。

Vue CLI4 尽可能的实现了 0 配置，但是如果确实需要自定义配置，按如下操作。

配置服务器，UI界面管理配置

启动配置服务器：vue ui

五、npm run build

六 、npm run dev

如有错误，欢迎指正！