使用Vue CLI 3提升您的Vue.js工作流程

如果没有命令行界面 (CLI) 工具的帮助，我们几乎无法想象现代 Web 开发。它们通过减少重复和乏味的任务的数量极大地促进和加速了开发工作流程。手动设置一个项目，包含所有的 linting、构建、测试、预处理、优化和依赖项跟踪功能，听起来不像是一项有趣的工作，是吗？ 

这就是为什么所有现代客户端开发框架（如angular、react等）都提供自己版本的 CLI 工具，vue.js 也不例外。但是在最新的第三个版本中，  Vue CLI 比其他版本领先一步。它现在不仅非常强大和灵活，而且还带有一个成熟的 GUI。是的，你没听错。Vue CLI 3 提供了一个开箱即用的完整图形用户界面。

使用新的 Vue CLI 及其 Vue UI GUI，现在开始新的 Vue.js 项目比以往任何时候都更容易。本教程将向您展示如何使用 Vue CLI，以及 Vue UI 如何进一步加快您的工作流程。让我们开始吧！

什么是 Vue CLI？

Vue CLI 是一套用于 r api d 原型设计、简单的应用程序搭建和高效的项目管理的工具。它由三个主要工具带组成：

• CLI是一个全局安装的 npm 包，它通过vue命令提供核心功能。它使我们能够轻松地搭建一个新项目（vue create）或快速原型化原始想法（vue serve）。如果我们想对我们的项目进行更具体和可视化的控制，我们可以通过运行 vue ui命令打开 CLI 的 GUI 版本。

• CLI 服务是一个开发依赖项（vue-cli-service二进制文件），本地安装到使用 CLI 创建的每个项目中。它允许我们开发我们的项目（vue-cli-service serve），将其打包用于生产（vue-cli-service build），还可以检查内部webp ack 项目的配置（vue-cli-service inspect）。

• CLI 插件是为我们的项目提供附加功能的 npm 包。他们的名字以@vue/cli-plugin-（对于内置插件）或vue-cli-plugin-（对于社区插件）开头。我们可以在开发过程中随时通过 vue add命令添加它们。

在接下来的部分中，我们将探讨上述工具和实用程序的所有细节，但首先，让我们看看使 Vue CLI 如此强大和灵活的实际功能。

Vue CLI 是一个功能齐全的系统，用于促进我们的 Vue.js 开发工作流程

Vue CLI 凭借其丰富的功能集加速并简化了 Vue.js 项目的开发。让我们看看这些功能是什么：

• 基于插件的架构。 Vue CLI 完全围绕插件构建，这使得它非常灵活和可扩展。我们可以选择在项目创建过程中添加哪些内置插件。但我们不限于这些——我们还可以在创建项目后随时添加任意数量的插件。 

• Vue CLI 是完全可配置、可扩展和可升级的。

• 一组官方预装插件，集成了来自前端生态系统（Babel、ESLint、typescript、PWA、Jest、Mocha、Cypress、Nightwatch）的一流工具。

• 一个默认预设，我们可以在项目创建期间或之后根据需要进行修改。

• 无需弹出。与 React 和 Angular CLI 工具相比，我们可以在创建后随时安全地检查和调整项目的 webpack 配置，而无需弹出应用程序并切换到手动配置。

• 多页支持。 

• 无需任何配置的即时原型制作。

• 不同的构建目标允许我们生成项目的不同版本——我们可以使用相同的代码库并将其构建为应用程序、库或 Web 组件。

• 现代模式功能。这将为现代浏览器构建我们的应用程序，但会自动回退旧浏览器。酷吧？

• 用于轻松创建、更新和管理复杂项目的成熟 GUI 。

• 用户界面插件 API。Vue UI 公开了一个插件 API，我们可以使用它向 CLI 的 GUI 版本添加自定义功能。

• 来自社区的许多有用的插件。

Vue CLI 入门

在了解了 Vue CLI 的魔力之后，是时候在实践中看到它了。首先，我们需要安装 Vue CLI 3。它需要node .js 8.9+（推荐8.11.0+），所以我们需要确保我们的机器上有它。然后我们只需打开终端或命令提示符，然后运行：

npm install -g @vue/cli

安装完成后，我们就可以开始使用vue命令了。为了检查一切是否正常，我们运行vue --version. 这应该会显示已安装的 Vue CLI 版本。现在，让我们探索一下我们实际上可以用 Vue CLI 做什么。

即时原型

尽管 Vue CLI 主要是为处理复杂项目而设计的，但它允许我们快速轻松地尝试我们的原始想法。可以通过安装全局 Vue CLI 服务插件来激活其即时原型设计功能：

npm install -g @vue/cli-service-global

从现在开始，我们可以随时使用该vue serve命令。让我们试试看。我们创建一个App.vue文件，内容如下：

<template>
  <h1>Hello, Vue!</h1>
</template>

然后，在同一个目录中，我们运行：

vue serve

这将启动 Vue CLI 开发服务器并在 http://localhost:8080/. 当我们在这个地址打开浏览器时，我们应该会看到一个漂亮的Hello, Vue！标题。

创建新项目

上一节只是一个热身。现在让我们做一些更复杂的事情。

该vue create命令使用交互式过程来选择新项目的选项。让我们运行它并查看它的选项。

vue create vuecli-project

使用 Vue CLI 创建一个新项目

在第一个窗口中，我们被邀请选择一个预设。开箱即用的预设只有一个，称为default。我们将选择第二个选项，即手动选择项目所需的功能，然后按Enter继续。 

在下一个窗口中，我们使用箭头键在功能列表中上下导航，并使用空格键选择我们想要的内容。在这里，除了已经选择的Babel和Linter/Formatter，我还检查了 Router和Vuex。选择所需功能后，按Enter继续。

在下一个窗口中，我们被询问是否对路由器使用历史模式。我只是按Enter接受默认值 Yes。

在下一个窗口中，我们需要选择如何 配置Linter  。我选择了 ESLint + Prettier。 

在下一个窗口中，我们选择何时使用Linter检查项目。我 在保存时选择了 Lint，它适用于每次保存文件时。

在下一个窗口中，我们需要决定如何配置我们的项目。选择是要为每个功能使用单独的配置文件，还是要在package.json文件中包含所有配置设置。我更喜欢单个文件，所以我选择了 In package.json选项。

在最后一个窗口中，我们可以将整个项目创建配置保存为易于使用的预设，以供将来的项目使用。我将我的保存为 spa-simple。预设保存在用户文件夹内的 .vuerc 文件中。

当我们完成创建过程后，将创建并配置项目，并下载并安装所需的包。

探索项目结构

在本节中，我们将探索 Vue CLI 为我们创建的内容。

在上面显示的项目文件夹中，我们有以下文件和文件夹：

• node_modules文件 夹包含应用程序和开发工具所需的包。

• 公用文件夹包含静态项目资产， 不会包含在捆绑过程中。

• src文件夹包含具有所有资源的 Vue.js 应用程序。

• .gitignore 包含从 Git 版本控制中排除的文件和文件夹的列表。

• babel.config.js 包含 Babel 编译器的配置设置。

• package.json 包含 Vue.js 开发所需的包列表以及用于开发工具的命令。

• package-lock.json 包含项目所需的包及其依赖项的完整列表。

• README.md 包含有关项目的一般信息。

新创建的src文件夹

现在让我们仔细看看src文件夹：

在上面显示的src 文件夹中，我们有以下文件和文件夹：

• assets文件夹用于存放应用程序所需的静态资源，这些资源将包含在捆绑过程中。

• components文件夹用于存放应用程序的组件。

• 视图文件夹用于将使用 URL 路由功能显示的组件。

• App.vue 是根组件。

• main.js是创建 Vue 实例对象的javascript文件。

• router.js 用于配置 Vue 路由器。

• store.js 用于配置使用 Vuex 创建的数据存储。

更改项目配置

默认项目配置包含合理的设置，但如果需要，我们可以通过  在项目文件夹中添加vue.config.js文件或在package.jsonvue文件中添加部分来更改它们。 

让我们尝试第一个。我们创建一个vue.config.js文件并将以下选项放入其中：

module.exports = {
  runtimeCompiler: true
}

这将允许组件将其模板定义为字符串，而不是使用模板元素。要探索完整的配置选项集，您可以 访问 Vue CLI 配置页面。

开发项目

正如我们在上面看到的，Vue CLI 服务带有三个默认脚本：serve、build和inspect. 第一个用于开发过程。npm run serve我们使用以下命令运行我们的项目 ：

当我们在浏览器中打开我们的应用程序时，我们应该会看到以下页面：

这是Home.vue页面，它使用了HelloWorld.vue组件。 

该 serve 命令启动一个基于 webpack-dev-server的开发服务器，该服务器具有有效的热模块替换(HMR) 功能。这意味着当我们对组件进行更改并保存它们时，它们将立即反映并且页面将在浏览器中更新。 

使用 Vue CLI 插件为项目添加新功能

在我们的应用程序开发的某个时刻，我们可能需要向项目添加一些额外的功能，为此我们需要安装 Vue CLI 插件。Vue CLI 插件可以修改 webpack 配置并将新命令注入到vue-cli-service. 要安装插件，我们使用vue add命令。 

假设我们想为我们的项目使用 Bootstrap 组件。幸运的是，有一个bootstrap-vue插件，可以为我们提供它们。要安装它，我们运行：

vue add bootstrap-vue

插件安装完成后，在 src 文件夹中，我们会找到一个新的plugins文件夹，其中放置了新插件。 

现在，为了测试插件的功能，让我们修改About.vue文件：

<template>
  <div class="about">
    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">
        <p>For more information visit website</p>
      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>
    </b-jumbotron>
  </div>
</template>

当我们指向浏览器中的 About页面时，我们应该会看到该页面已更新并使用 Bootstrap 设置样式：

构建生产项目

当应用程序准备好部署时，您需要创建一组仅包含应用程序代码和内容以及它们所依赖的模块的包，以便可以将这些文件部署到生产 HTTP 服务器。

构建应用程序

要构建我们的应用程序，我们运行：

npm run build --modern

该--modern参数创建应用程序的两个版本。其中一个针对支持最新 JavaScript 功能的现代浏览器，另一个是针对需要额外库来处理这些功能的旧浏览器的后备方案。很酷的是，在我们部署应用程序后，选择使用哪个版本是完全自动的！

注意：当我们运行 build命令时，Vue CLI 允许我们指定一个 --target选项，这允许我们将我们的代码库用于不同的用例。为构建应用程序设置了默认构建目标。我们还有两个选项可供选择：将我们的代码构建为库或 Web 组件。检查构建目标页面以获取更多详细信息。

探索dist文件夹

构建过程完成后，会在项目根目录中创建一个dist文件夹。让我们探索它的内容：

index.html文件将成为应用程序的入口点。它包含将从csslink和jsscript文件夹加载所有必要的 css和javaScript 文件的元素。

所以现在我们准备将我们的应用程序部署到生产服务器。有很多选择可供选择。您可以通过访问部署页面了解其中的许多内容。

让我们使用 Vue UI 对我们的项目进行 GUI 化

Vue CLI 3 非常强大，但这是有代价的。有太多的选择、命令和选项需要配置和记住。这使得它更加复杂和难以使用。为了让事情回到轻松愉快的状态，  Guillaume Chau创建了 Vue UI，它显着简化了开发体验并使其更加平易近人。 

起初，将 CLI 工具与图形界面结合起来可能听起来有点奇怪，但正如您稍后会看到的，这个卓越的 symb ios非常强大和高效。 

使用 Vue UI 重新创建我们的项目

在本节中，我们将创建我们之前创建的同一个项目，但这次我们将使用 Vue UI。

Vue UI 是用自己的 UI 框架制作的，在浏览器中运行它不需要 Electron。只需vue ui 在任何目录中运行命令：

npm run build --modern

Vue 项目管理器在选中项目选项卡的情况下启动。尚无现有项目。要在此处列出一些项目，我们需要通过 UI 创建它们或导入使用 CLI 创建的项目。让我们看看如何创建一个新项目。

我们切换到 Create选项卡，导航到我们的应用程序所需的目录，然后单击Create a new project here。

在下一个屏幕上，我们为项目文件夹命名并选择我们喜欢的包管理器。

在下一个屏幕上，我们可以为项目选择预设。它可以是我们之前创建的默认、手动、远程或自定义预设。spa-simple 是自定义预设的一个示例。在这里，我们选择Manual。

在下一个屏幕上，我们选择要安装的插件。 

最后，我们为我们选择安装的插件设置配置设置。当我们准备好时，我们点击 创建项目按钮。

现在将创建项目，我们将被重定向到项目的仪表板。

使用 Vue UI 项目仪表板

在插件部分中，列出了所有已安装的插件。要安装新插件，我们点击添加插件按钮。

在这里，我们可以搜索我们需要的插件，当我们找到它时，我们点击 安装按钮。在我们的例子中，我们搜索并安装bootstrap-vue插件。

安装插件后，我们可以在配置选项卡中设置选项。 

在 Files changed选项卡中，我们可以检查哪些文件受到影响以及如何受到影响。在这里，我不想提交任何更改，所以我点击了“跳过”按钮。

在Dependencies部分，我们列出了所有主要和开发依赖项。要添加依赖项，我们单击 安装依赖项按钮。

在模态窗口中，我们可以搜索主要或开发依赖项并安装它们。

在配置部分，我们可以自定义为我们添加的插件提供的设置。在这里，我们有 Vue CLI 本身和 ESLint 插件的设置。

任务部分为我们提供了一种方便的方式来使用 Vue CLI 和其他插件提供的所有可用命令。在此屏幕上，serve选择了任务。我们可以通过点击参数按钮来改变它的参数。

在模态窗口中，我们选择要运行任务的参数。

当我们运行serve任务时，仪表板将更新一些有用的信息。

当我们切换到输出选项卡时，我们会获得任务过程的日志。

当我们切换到Analyzer选项卡时，我们会得到一个很好的图表，它总结了整个项目的信息。

该build任务与该任务类似，serve不同之处在于前者生成可用于部署应用程序的生产包。 

我们可以像设置build任务一样为任务设置参数serve。

任务的输出字段inspect为我们提供了有关已解析的 webpack 配置的信息。

就是这样！我们使用 Vue UI 成功地重新创建了我们的项目。但是，正如我们所看到的，当我们使用 GUI 时，创建和配置过程更容易，也更愉快。 

结论

在本教程中，我们了解到 Vue CLI 是一个用于现代 Web 开发的完整系统。它使我们能够快速轻松地使用整个 Vue 生态系统和第三方工具进行操作。