Vue 学习(八、Vue-CLI 使用和项目结构介绍)

一、快速开发工具

1. Vue-CLI

搭建项目的问题

当以前端工程化为目标搭建一个项目时，虽然有 webpack 帮我们减少很多麻烦，但项目的基础配置依旧繁琐

构建一个新的项目时，我们大概会经历：

• 创建项目，构建标准的目录结构
• 初始化 package.json，让项目被 NPM 管理
• 基础依赖安装(基础依赖指的是大部分项目都会用到的插件或加载器, 比如样式加载器、文件加载器、小型服务器插件等 )
• 配置 webpack.config.js，将加载器和插件进行应用
• 等等…，最后还要写一个 Demo 页面，确保项目搭建正确

几乎每个项目在构建时都要经历这些步骤，这些操作不仅与实际业务无关，还很耗时，所以我们非常需要一个能将
这些步骤自动化的工具，来简化和加快我们的项目基础构建工作

快速开发工具

快速开发工具就是用来解决上述问题的，它会以大部分项目都在使用的目录结构和基础配置为标准，快速的帮我们
搭建出一个新的项目，帮我们解决项目基础构建问题，让我们将更多的经历和工作重心放在业务开发上，也有人将这
种工具称为 - 脚手架

Vue-CLI

快速开发工具是一个广泛的概念，属于一种分类，而 Vue-CLI 就是分类中的一个具体实现，它是专门为技术栈是
vue.js 的项目产生的一个快速开发工具，本文会记录 Vue-CLI 的基本使用方式和目录结构，关于它的更多资料，推荐
阅览 Vue-CLI 中文网 或 Vue-CLI 英文网

2. 安装 Vue-CLI

1) 安装

我们可以使用 NPM 来安装 Vue-CLI。Vue-CLI 属于命令行工具，我们会经常使用其命令，就和 webpack 差不
多，所以建议进行全局安装。在任意处打开 CMD 窗口，执行如下命令：

npm i @vue/cli -g

Vue-CLI 的版本有很多，为了方便后面学习，我们需要对版本的称呼进行统一，可以用它的重大更新作为分界，
Vue-CLI 1.x 和 Vue-CLI 2.x 我们称为老版本，Vue-CLI 3.x 及未来版本称新版本，而上面安装的就是新版本

2) 配置环境变量

为了任意地方都可以使用 Vue-CLI 的命令，我们需要配置系统变量，找到 NPM 的全局路径，查看路径下是否有刚
刚安装的 Vue-CLI 生成的命令行脚本 vue.cmd

确定有命令行脚本后，将全局路径配置到系统环境变量的 Path 属性中

3) 验证命令能否使用

任意处打开 CMD 窗口，并运行 Vue-CLI 的命令 vue -V，如果出现下图内容，代表 Vue-CLI 安装成功

二、使用老版本 Vue-CLI

有时候我们虽然安装的是新版本 Vue-CLI，但是我们却想使用老版本的命令，以及使用老版本的结构来创建项目，
这时候我们可以通过 NPM 安装一个老版本兼容包，命令如下：

npm i -g @vue/cli-init

安装后，我们就可以使用老版本命令，以老版本结构为基础创建项目了

1. 构建项目

1) 用老版本命令，来构建项目

在想创建项目的地方打开 CMD 窗口，运行命令 vue init webpack 文件夹名，这时会出现如下信息，代表正在拉取
老版本的模板，这里需要等一会

2) 设置项目名

拉取完模板后，会出现如下画面，让我们来设置项目名，一般文件夹名就是项目名，所以直接回车就可以

3) 设置项目描述

接下来，会提示让我们设置项目描述，不想用默认的就改一下，然后回车

4) 设置项目作者

接下来，会提示让我们设置项目作者，不想用默认的就改一下，然后回车

5) 选择运行时版本还是模板编译版本

接下来，会提示让我们设置 Webpack 打包时使用的 Vue 版本，第一个是模板编译版，第二个是运行时版本，两者
区别已经讲过了，按照需要自己选就可以，按键盘的上下箭头就能进行选择，选中的会变成深色字体，选好按回车

此处我选择的是运行时版本

6) 是否安装 vue-router 插件

接下来，会提示让我们输入 Y 或 n 来确定是否使用 vue-router 插件, 在 Vue 进行单页面应用开发时，vue-router
可以支持路由跳转功能，因为还没学所以我输入了 n

7) 是否安装 ESLint 插件

接下来，会提示让我们输入 Y 或 n 来确定是否使用 ESLint 插件, ESLint 是一个静态语法检查的插件，它会按照
ECMAScript 规范 或 自定义的规范 对代码进行检查，此处我选 n

8) 是否安装单元测试相关插件

接下来，会提示让我们输入 Y 或 n 来确定是否使用单元测试相关插件，此处我选 n

9) 是否安装 Nightwatch 测试插件

接下来，会提示让我们输入 Y 或 n 来确定是否使用 Nightwatch 测试插件，我选 n

10) 依赖的安装方式

接下来，会让我们选择以 npm 还是 yarn 的方式来安装创建项目所需的依赖，这里我选 npm 方式

11) 等待项目构建完成

最后，只需要等待项目构建完成就可以了，最终会出现如下画面

12) 验证项目是否能正常启动

进到创建好的项目文件夹内，打开 package.json 文件，来看看可以使用的自定义脚本命令

Vue-CLI 一共帮我们创建好 3 个脚本命令

• dev：用开发环境运行项目
• start：用开发环境运行项目，其实就是调了一下 dev 脚本
• build：用生产环境配置将项目打包

已经知道脚本作用了, 那我们直接运行一下看看效果, 在项目根目录通过 CMD 窗口, 运行npm run start

出现上图内容，说明 webpack-dev-server 已经启动了，我们按提示的地址，用浏览器访问一下：

能看到这个画面，就说明整个项目的初始构建已经完成了

2. 项目结构介绍

1) 目录整体介绍

目录名	描述
build	项目打包的相关配置，都是一些对 webpack 进行配置的文件
config	定义构建相关的变量，主要是为了提供给 build 文件夹中的文件使用
node_modules	通过 npm 下载的项目中使用的依赖包
src	存放业务相关的代码和资源
src -> assets	存放图片之类的资源文件，这个目录中放的都是想被 webpack 的各种 loader 当作模块处理的文件
src -> components	存放项目中想被复用的公共 UI 组件
static	存放图片之类的资源文件，这个目录中的文件打包时会被 CopyWebpackPlugin 插件复制到出口根目录

2) 文件细分介绍

① build 目录内文件介绍

文件名	描述
build.js	构建生产环境的代码
check-versions.js	检查 Node.js 环境 和 NPM 的版本
utils.js	构建辅助工具类，类中主要是通过运算，来动态生成 webpack 一些加载器的配置
vue-loader.conf.js	用来配置 sourceMap，项目打包后会对 JS 压缩，sourceMap 用来记录代码压缩前后的对应关系，方便调试
webpack.base.conf.js	webpack 配置文件 - 开发环境和生产环境的通用配置。将基础配置、开发环境和生产环境各对应一个文件比较易于维护
webpack.dev.conf.js	webpack 配置文件 - 开发环境的配置，webpack 打包过程中内容会与 webpack.base.conf.js 合并
webpack.prod.conf.js	webpack 配置文件 - 生产环境的配置，webpack 打包过程中内容会与 webpack.base.conf.js 合并

建议每个文件的内容都好好读一下，因为有 webpack 和 npm 的基础，这些配置文件慢慢看还是可以看懂的

② config 目录内文件介绍

文件名	描述
dev.env.js	定义开发环境构建时要用的变量
prod.env.js	定义生产环境构建时要用的变量
index.js	定义开发环境和生产环境构建时都要使用的变量

③ src 目录内文件介绍

文件名	描述
assets -> logo.png	Demo 中要用的图片，会被 webpack 的加载器当作模块处理，实际项目中的静态资源也建议放在该目录下
components -> HelloWorld.vue	Demo 中定义的组件，实际项目中的自定义组件也建议放在该目录下
App.vue	Demo 中的入口组件，实际项目中的入口组件也建议放在这个位置
main.js	Demo 中的入口文件，里面会定义 Vue 对象，并使用入口组件 App.vue

这些文件中的具体内容，就不详细分析了， 因为前面学了那么久的 Vue 知识，这些内容慢慢看，完全可以看懂

④ 其他文件

文件名	描述
static -> .gitkeep	目录内暂时没有内容，git 默认不会管理空目录，所以目录内习惯建一个空文件 .gitkeep，目的是让 git 管理
.babelrc	该文件用来配置 ES 语法适配插件 - Babel
.editorconfig	定义代码风格，使用 IDE 对代码进行格式化时，会参照该文件
.gitignore	用来定义可以被 git 忽略的文件
.postcssrc.js	用来配置 PostCSS 插件的，该插件用来做跨浏览器样式兼容的，能自动添加特殊浏览器的私有前缀
index.html	主页，现在都是单页面应用，所以该 html 唯一的作用就是来驱动 main.js
package.json	npm 配置文件
README.md	git 管理的项目，可以通过该文件来添加项目说明

通过 Vue-CLI 构建的是一个标准的单页面应用结构，其生成的各个文件，我相信慢慢看是可以读懂的，以后我们可
以按照项目的实际需求对各个配置文件进行修改，达到想要的效果

三、使用新版本 Vue-CLI

Vue-CLI 新版本构建出的项目是以无配置文件为目标，所以构建出来的项目不再有 webpack 相关的配置文件

1. 构建项目

1) 用新版本命令，来构建项目

在想创建项目的地方打开 CMD 窗口，运行命令 vue create 项目名

2) 选择如何构建项目

此处有三个选项：

• 使用 Vue 2 + Babel + ESLint 来构建项目
• 使用 Vue 3 + Babel + ESLint 来构建项目
• 手动配置

这个地方我选择的是手动配置，另外要注意 Vue2、Vue3 和 Vue-CLI2、Vue-CLI3 是不一样的，前者代表 Vue 的版
本，后者代表的是快速生成工具的版本

3) 选择具体配置

按空格选择想使用的插件，此处我选了 Vue 和 Babel

4) 选择 Vue 的版本

因为现在学的就是 Vue 2, 所以选择 2.x

5) 选择 Babel 配置存放的位置

第一个选项代表单独存在一个文件内， 第二个选项代表存在 package.json 中，我选第一个

6) 是否保存本次配置

保存后，下次构建项目时除了 Vue2、Vue3、手动配置外，还会有本次的配置供选择，此处我输入 N 不保存

7) 等待项目构建完成

看到如下画面，代表项目构建完成

8) 验证项目正确性

与 Vue-CLI2 一样，我们可以通过 package.json 文件来查找运行的脚本，也可以通过上图中最后提示的命令去运
行，为了方便，我直接使用上图中的命令 cd vue-cli3-study、npm run serve

上图代表 webpack-dev-server 启动成功，接下来通过浏览器访问提示的地址

2. 新版本和老版本结构对比

我们先来看下新版本创建的项目的整体结构

与老版本结构中的的重要目录对比

文件名	描述
src 及 内部目录	作用、结构与老版本时一样，没有变化
public	和老版本的 static 目录功能一样，不同的是新版本中 index.html 放到该目录内， 而老版本 index.html 在项目根目录

通过对比我们可以发现，新版本和老版本的整体结构差不多，但是关于项目构建的 build 和 config 两个目录不见
了，这也正是 Vue-CLI 新版本无配置文件特性的体现

3. 新版本中修改配置

新版本 Vue-CLI 构建的项目中，虽然没有生成配置文件，但是并不代表没有 webpack 的配置，只是这些配置隐藏起
来，让我们的项目看上去结构更简单而已，如果想修改 webpack 的配置，简单介绍一下常见的三种方式：

1) 图形界面

在项目根目录打开 CMD 窗口，运行命令 vue ui：

出现上图中的 HTTP 地址就代表启动成功，然后直接通过浏览器访问，就可以用图形化的方式修改配置：

2) 添加配置文件

在项目的根目录添加配置文件 vue.config.js，该配置文件最后会与隐藏的 webpack 配置进行合并，具体的文件内容
建议参照 官方文档

3) 修改隐藏的配置文件

我们前面提到了，新版本 Vue-CLI 构建的项目，之所以不用生成 webpack 相关的配置文件，是因为在打包时有一套
隐藏的配置可以使用，该配置目录为 项目\node_modules\@vue\cli-service 和 项目\node_modules\@vue\cli-service\lib，
我们可以直接修改这两个目录下的文件来更改配置