2.3　Vue.js脚手架开发环境

本节主要介绍搭建Vue.js框架的脚手架（vue-cli）开发环境的方法，以及如何通过Visual Studio Code开发工具开发调试Vue.js程序等方面的内容。

2.3.1　安装Vue.js脚手架

所谓“脚手架”就是为了快速搭建应用程序开发框架而设计开发的自动构建工具。在当前各种Web开发框架流行的今天，大部分前端开发工具和框架都设计了自己的“脚手架”工具，而Vue.js框架的脚手架就是vue-cli命令行工具。

Vue.js框架自身的迭代速度很快，目前主流的是Vue 2版本和Vue 3+版本。相比较而言，Vue 3+版本在Vue 2版本的基础上增加了不少新特性和新功能。因此，也造成了Vue 3+版本与Vue 2版本在使用上多少有些差异。

在Vue.js脚手架（vue-cli）的使用上，Vue 3+版本与Vue 2版本也存在着不同，下面我们主要以Vue 3+版本进行介绍。假设当前系统开发环境已经安装好新版的NPM工具和Webpack工具，这样就可以继续安装vue-cli命令行工具了，具体命令如下：

npm install -g @vue/cli   // 注意：Vue 3+版本为“@vue/cli”，Vue 2版本为“vue/cli”
# OR
yarn global add @vue/cli  // yarn是Facebook提供的依赖管理工具，类似npm工具

在命令行控制台中输入以上的命令，安装效果如图2.2所示。

图2.2　安装vue-cli命令行工具

如图2.2中的箭头所示，当前安装的是新版的“vue/cli@4.5.2”命令行工具，此外还自动安装其他一些依赖工具。

如果想验证一下vue-cli命令行工具是否安装成功了，可以通过“vue -V”命令查看vue-cli命令行工具的版本号来进行。注意，这里的参数“-V”要使用大写字母。效果如图2.3所示。

图2.3　验证vue-cli命令行工具版本号

如图2.3中的箭头所示，验证的版本号与安装后提示的版本号相对应，说明vue-cli命令行工具安装成功了。

2.3.2　通过Vue.js脚手架进行快速原型开发测试

Vue.js脚手架支持快速原型开发（Instant Prototyping）方式，就是通过单个的Vue页面进行简单应用的设计。要使用这种快速原型开发（Instant Prototyping）方式，需要添加对vue-cli命令行工具的服务支持，具体操作方法如下：

npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global

在成功添加好对vue-cli命令行工具的服务支持后，就可以通过“vue serve”命令进行快速原型开发测试了。

这里，我们通过Visual Studio Code开发工具进行Vue.js脚手架的快速原型开发测试。在开发测试前，需要在VS Code开发工具中安装一个名称为“Vetur”的Vue.js扩展插件，该扩展插件添加了VS Code开发工具对Vue文件的支持。

然后，就可以通过VS Code开发工具创建一个真正的Vue单页面文件（hellovue.vue，注意文件后缀名为vue），在页面中输出一行简单的欢迎信息（“Hello Vue.js!”），代码如下：

【代码2-2】（详见源代码hellovue目录中的hellovue.vue文件）

【代码说明】

在上面的代码中，<template>是Vue.js框架的模板语法，而<h3>就是最基本的HTML标签语法。

最后，通过“vue serve”命令进行测试，具体命令如下：

vue serve hellovue.vue

在命令行控制台中执行上面的命令，效果如图2.4所示。

图2.4　通过“vue serve”命令进行测试

如图2.4中的箭头和标识所示，命令行提示信息中显示通过“http://localhost:8080/”地址可以运行测试hellovue.vue文件，效果如图2.5所示。

图2.5　通过浏览器测试Vue.js文件

如图2.5中的箭头所示，【代码2-2】中第02行代码定义的字符串信息被成功渲染到页面中显示了。

2.3.3　通过Vue.js脚手架进行打包

上一小节介绍的vue-cli命令行工具的服务（@vue/cli-service-global）支持，除了通过使用“vue serve”命令直接启动HTTP服务测试Vue.js单页面文件应用的方式，还支持使用“vue build”命令进行打包并测试的方式。

通过“vue build”命令进行打包的方法如下：

vue build hellovue.vue

在命令行控制台中执行上面的命令，效果如图2.6所示。

图2.6　通过“vue build”命令进行打包

如图2.6中的箭头所示，执行“vue build hellovue.vue”命令将通过生产模式对Vue.js文件进行打包，打包成功后的文件均输出到“dist”目录下。可以通过VS Code开发工具查看一下目录的状态变化，如图2.7所示。

图2.7　通过“vue build”命令打包输出到dist目录

如图2.7中的箭头所示，通过“@vue/cli-service-global”服务将单一Vue.js文件（hellovue.vue）打包输出到dist目录。在dist目录中，自动生成了一个index.html页面文件和一组js文件和map文件（js子目录内）。最后，就可以将dist目录中的文件直接部署到服务器中去测试了。

为了加快效率，这里先不用那些常规的Web服务器来测试，可以通过Node内置的http-server扩展服务进行简单的测试。首先，在命令行控制台中进入dist目录，然后输入http-server或hs命令启动Node服务，效果如图2.8所示。

图2.8　启动http-server服务

如图2.8中的箭头所示，通过浏览器运行“http://localhost:8080”地址启动HTTP服务，效果如图2.9所示。

图2.9　测试dist打包目录

如图2.9中的箭头所示，最终在浏览器中的显示效果与图2.5完全一致，说明打包输出的dist目录是正确的。

2.3.4　通过Vue.js脚手架创建应用

Vue.js脚手架功能十分强大，通过vue-cli命令行工具的“vue create”命令，可以直接创建Vue.js应用项目，该应用项目会自动生成若干必要的框架文件，以及一个默认的Vue单文件页面。同时，这个默认的Vue单文件页面已经是一个最基本的Vue.js应用了，通过“npm run”命令就可以直接运行测试该应用项目。下面具体介绍一下通过Vue.js脚手架创建应用项目及进行运行测试的过程。

（1）选定好打算创建Vue.js应用项目的目录，进入该目录的命令行控制台，通过“vue create”命令创建指定的项目名称（createvue），具体命令如下：

vue create createvue

（2）在命令行控制台中执行上面的命令，效果如图2.10所示。

图2.10　通过“vue create”命令创建应用项目（一）

（3）如图2.10中的箭头和标识所示，继续选择默认的“default(babel, eslint)”项后确认回车，效果如图2.11所示。

图2.11　通过“vue create”命令创建应用项目（二）

（4）如图2.11中所示，vue-cli命令行工具将会创建刚刚指定的createvue项目，并安装项目所需的相关插件，如图2.12所示。

图2.12　通过“vue create”命令创建应用项目（三）

（5）如图2.12中的箭头和标识所示，安装过程需要一段时间，此时需要耐心等待一会儿。等到安装过程全部完成后，命令行控制台会提示如图2.13所示的信息。

图2.13　通过“vue create”命令创建应用项目（三）

如图2.13中的箭头所示，命令行控制台中的提示信息告诉我们，进入项目目录后通过输入“npm run serve”命令就可以启动运行项目了。

（6）接下来，我们就按照上面的提示信息测试一下，效果如图2.14所示。

图2.14　通过“run serve”命令运行应用项目

（7）如图2.14中的箭头所示，命令行控制台中的提示信息告知我们，通过在浏览器中输入“http://localhost:8080/”地址就可以运行项目了，效果如图2.15所示。

图2.15　测试运行Vue.js应用项目

如图2.15中的箭头所示，浏览器中显示的插件信息（babel、eslint）与上面图2.10中的选择项是相对应的，说明这个Vue.js项目创建成功了。

现在，到这一步基本就完成了一个Vue.js项目的构建、测试和运行任务，设计人员就可以在这个Vue.js项目的骨架上按照自己项目的需求进行开发了。

在项目开发完成后，还有很重要的一步就是项目的打包和发布，那么通过vue-cli命令行工具如何实现呢？其实，在上面的图2.14中命令行控制台已经给出了提示信息，如图2.16所示。

图2.16　通过“npm run build”命令打包发布应用项目（一）

如图2.16中的箭头所示，根据命令行控制台中的提示信息，进入项目目录后通过输入“npm run build”命令就可以对项目执行打包发布操作，效果如图2.17所示。

图2.17　通过“npm run build”命令打包发布应用项目（二）

如图2.17中所示，dist目录已经构建完成，直接将该目录部署到服务器上就可以运行。这里就不再给出具体操作步骤了，读者可以参考前一小节中关于“Node内置的http-server扩展服务”的内容。

2.3.5　通过vue-cli结合Webpack创建应用

通过vue-cli命令行工具还可以结合Webpack工具创建Vue.js项目应用。严格来讲，这其实是Vue 2版本下的操作方式，所结合的Webpack工具其实是Vue.js官方所推荐的模板。但由于Vue 2版本目前也非常流行，且有大量的实际项目在使用这个版本，因此这里也向读者进行一个简单的介绍。

在Vue 2版本下创建应用项目同样会自动生成若干必要的框架文件，以及一个默认的Vue单文件页面。不过，该项目内生成的文件和目录与Vue 3版本下生成的略有不同，但迁移方式也不是很复杂（在后文中会具体介绍）。

下面，我们就具体介绍一下在Vue 2版本下通过vue-cli命令行工具创建应用项目及测试运行的过程。

（1）对于Vue 2版本下vue-cli命令行工具，就不是通过“vue create”命令创建应用项目了，而是通过“vue init”命令来实现的，具体的命令格式如下：

vue init webpack your-project-name

其中，webpack是指定的模板名称（webpack是官方推荐的默认模板工具，当然也可以指定其他模板工具），your-project-name是指定创建的项目名称。

另外需要注意的是，在使用“vue init”命令之前需要先安装该命令扩展工具，具体命令如下：

npm install –g @vue/cli-init

（2）在命令行控制台中执行上面的命令，效果如图2.18所示。

图2.18　安装“vue init”命令扩展工具

（3）如图2.18中的箭头所示，系统默认安装了新版本的“@vue/cli-init@4.4.4”。安装完毕后，通过“vue init”命令创建指定的项目名称（initvue），具体命令如下：

vue init webpack initvue

（4）在命令行控制台中执行上面的命令，效果如图2.19所示。

图2.19　通过“vue init”命令创建应用项目（一）

（5）如图2.19中所示，命令行控制台会依次给出若干提示信息，我们按照实际需要依次进行配置即可。配置信息都完成后，就是一个相对漫长的下载安装过程了，如图2.20所示。

图2.20　通过“vue init”命令创建应用项目（二）

（6）整个安装过程相对于Vue 3版本所需要的时间要长不少，需要耐心多等待一会儿。等到安装过程全部完成后，命令行控制台会提示如图2.21所示的信息。

图2.21　通过“vue init”命令创建应用项目（三）

如图2.21中的箭头所示，命令行控制台中的提示信息告诉我们，进入项目目录后通过输入“npm run dev”命令就可以启动运行项目了。

（7）接下来，我们就按照上面的提示信息测试一下，效果如图2.22所示。

图2.22　通过“npm run dev”命令运行应用项目

（8）如图2.22中的箭头所示，命令行控制台中的提示信息告知我们，通过在浏览器中输入“http://localhost:8080/”地址就可以运行项目了，效果如图2.23所示。

图2.23　测试运行Vue.js应用项目

（9）最后，还是通过输入“npm run build”命令对项目进行打包发布操作，效果如图2.24所示。

图2.24　通过“npm run build”命令打包发布应用项目

下面我们还是通过VS Code开发工具查看一下initvue项目中的变化，如图2.25所示。

图2.25　生成的dist打包目录

如图2.25中所示，dist目录已经自动生成，该目录下包括一个index.html页面文件和一个static目录，这个static就是通过Webpack打包后生成的脚本文件。至于测试运行的方法，直接将该目录部署到服务器上即可。

2.3.6　通过Visual Studio Code开发调试Vue代码

目前，通过Visual Studio Code开发工具开发调试Vue.js应用代码，几乎是最流行的标准配置了。Visual Studio Code开发工具的强大之处就不必多说了，也正是因为Visual Studio Code开发工具强大的扩展能力，设计人员才在该工具平台下设计出了许多基于Vue.js应用开发的优秀插件。接下来，我们就借助前面编写完成的initvue项目应用，详细介绍一下通过Visual Studio Code开发调试Vue代码的基本过程。

（1）在Visual Studio Code开发工具中安装一款名称为vetur的插件，该插件实现了vue代码基本语法的高亮功能，如图2.26所示。

图2.26　在VS Code工具中安装vetur插件

（2）为VS Code开发工具安装调试时所使用的浏览器插件。一般地，浏览器会选择Chrome和Firefox这两款，相关的安装地址如下：

• Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

在VS Code开发工具中，安装Debugger for Chrome插件后的效果如图2.27所示。

图2.27　在VS Code工具中安装“Debugger for Chrome”插件

• Debugger for Firefox

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug

在VS Code开发工具中，安装Debugger for Firefox插件后的效果如图2.28所示。

图2.28　在VS Code工具中安装“Debugger for Firefox”插件

（3）最后，通过前面编写完成的initvue项目应用测试一下调试过程。我们先打开“src\components”目录下的HelloWorld.vue代码文件，然后跳转到第90行代码中，并在该行代码设置断点，如图2.29所示。

图2.29　在Vue代码中设置断点

（4）如图2.29中所示，被设置断点的代码行的左侧会标记一个“实心圆点”。在VS Code开发工具中设置断点的方法很简单，按F9快捷键即可。

（5）在VS Code开发工具自带的控制台窗口中输入“npm run dev”命令，启动该Vue.js应用项目（等同于命令行控制台方式），如图2.30所示。

图2.30　在VS Code开发工具自带的控制台窗口中启动项目

（6）如图2.30中的箭头所示，控制台窗口中给出的提示信息与之前命令行控制台中的信息基本一致。不过，这里的方法不再是直接通过运行浏览器运行调试了，而是在VS Code开发工具中通过按F5快捷键来开启调试功能，此时VS Code会自动打开浏览器（Firefox）并通过访问“http://localhost:8080”地址运行initvue项目。

（7）此时，浏览器的状态与图2.23完全一致，而我们要关注的是VS Code开发工具的状态，如图2.31所示。

图2.31　在VS Code开发工具自带的控制台窗口中启动项目

（8）如图2.31中的箭头和标识所示，VS Code开发工具的界面中弹出了一个“调试菜单”工具条，我们可以通过菜单中的“单步（Step in）”按钮逐行运行Vue代码。

此外，我们观察到源代码中的msg变量定义的字符串信息，与调试（变量）窗口中所对应变量的数据完全一致。基于此功能，设计人员就可以在VS Code开发工具中借助浏览器插件的配合，调试Vue.js应用代码。