我们很难想象没有CLI工具的现代Web开发会是怎样的。它们通过减少重复和繁琐的任务极大促进和加快了开发工作流程。这就是为什么所有现代客户端开发框架（如Angular、React等）都提供了自己的CLI工具，而Vue.js也不例外。

最新版的Vue CLI 3不仅功能强大、灵活，还提供了完整图形用户界面。使用新的Vue CLI及其Vue UI GUI可以更轻松地创建新的Vue.js项目。本文将向你展示如何使用Vue CLI以及Vue UI进一步加快你的工作流程。

什么是Vue CLI？

Vue CLI是一组用于快速原型设计、简化应用程序搭建和进行高效项目管理的工具。它由三个主要的工具组成：

CLI是一个npm包，通过vue命令提供核心功能。它可以帮我们轻松地构建一个新项目（vue create）或者快速创建原始构思（vue serve）。如果我们想要对项目进行更具体和可视化的控制，可以通过运行vue ui命令打开CLI的GUI。
CLI Service是一个开发依赖项（vue-cli-service二进制文件），安装在使用CLI创建的每个项目中。它可以帮助我们开发项目（vue-cli-service serve）、打包（vue-cli-service build），以及检查内部Webpack项目的配置（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配置，无需弹出应用程序并切换到手动配置。
多页面支持。
无需任何配置即可进行即时原型设计。
不同的构建目标可以生成不同版本的项目——我们可以使用同一个代码库构建App、库或Web组件。
现代模式功能。构建适用于现代浏览器的应用程序，同时兼容旧版本的浏览器。
一个完整的GUI，可轻松创建、更新和管理复杂项目。
UI插件API。Vue UI公开了一个插件API，我们可以用它将自定义功能添加到CLI的GUI版本中。
来自社区的大量有用插件。

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://localhost8080/上运行该应用程序。当我们使用浏览器打开这个地址时，将看到Hello,Vue！。

创建一个新项目

vue create命令通过一个交互式进程来选择新项目的选项。让我们运行它，并看看它都有哪些选项。

vue create vuecli-project

使用Vue CLI创建一个新项目

在第一个窗口中，我们被要求选择一个预设。内置的预设只有一个，也就是默认的。我们将选择第二个选项，即手动选择项目所需的功能，然后按Enter继续。

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

在下一个窗口中，系统会询问是否使用Router历史记录模式。我按Enter键，使用默认值Yes。

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

在下一个窗口中，我们选择何时使用Linter检查项目。我选择了Lint on save，也就是每次在保存文件时应用Lint。

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

在最后一个窗口中，我们将整个项目配置保存为一个易于使用的预设，用于未来的项目。预设保存在用户文件夹的.vuerc文件中。

完成这个过程后，将创建和配置项目，并下载和安装所需的软件包。

项目结构

在本节中，我们将查看Vue CLI所创建的内容。

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

node_modules文件夹包含了应用程序和开发工具所需的包。
public文件夹包含了静态项目资源文件，这些文件不会被包含在捆绑包中。
src文件夹包含了Vue.js应用程序的所有资源。
.gitignore包含了被排除在Git版本控制之外的文件和文件夹列表。
babel.config.js包含了Babel编译器的配置。
package.json包含了Vue.js开发所需的包列表以及用于开发工具的命令。
package-lock.json包含了项目所需的软件包及其依赖项的完整列表。
README.md包含了有关项目的一般性信息。

新创建的src文件夹

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

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

assets文件夹用于放置应用程序所需的静态资源，这些资源将被包含在捆绑包中。
components文件夹用于放置应用程序的组件。
views文件夹用于放置通过URL路由功能来显示的组件。
App.vue是根组件。
main.js是创建Vue实例对象的JavaScript文件。
router.js用于配置Vue路由器。
store.js用于配置使用Vuex创建的数据存储。

更改项目配置

默认项目配置包含了合理的设置，但如果有必要，我们也可以通过在项目文件夹中添加vue.config.js文件或通过向package.json文件添加vue部分来更改这些配置。

我们先试试第一种方法。我们创建一个vue.config.js文件，并在其中添加以下选项：


module.exports = {
  runtimeCompiler: true
}

这样就可以将组件模板定义为字符串，而不是使用模板元素。完整的配置选项请访问Vue CLI Config页面（https://cli.vuejs.org/config/）。

开发项目

如上所述，Vue CLI Service附带了三个默认脚本：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文件夹中找到一个新的插件文件夹，新安装的插件就在这个文件夹中。

现在，为了测试插件的功能，我们需要修改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>

当我们打开浏览器中的“关于”页面时，应该可以看到页面已更新，并使用了Bootstrap的样式：

##构建项目

在部署应用程序之前，你需要创建一组仅包含应用程序代码和内容的软件包以及它们所依赖的模块，以便可以将这些文件部署到生产环境的HTTP服务器种。

####构建应用程序

要构建应用程序，需要运行：

npm run build --modern

–modern参数创建了两个版本的应用程序。其中一个针对可以支持最新JavaScript功能的现代浏览器，另一个是需要额外库来支持这些功能的旧浏览器。在部署好应用程序之后，选择使用哪个版本完全是自动化的！

注意：当我们运行build命令时，Vue CLI允许我们指定——target选项，将代码库用于不同的用途。默认构建目标为构建应用程序。我们还有两个选项可选择：将代码构建为库或Web组件。

dist文件夹

构建过程完成后，将在项目根目录中创建dist文件夹。让我们来看看它的内容：

使用Vue UI

Vue CLI 3功能非常强大，但也是要付出代价的，因为有太多的选项、命令和选项太多需要记住。这让得它变得更复杂，更难以使用。为了让一切回归到一个轻松愉快的状态，Guillaume Chau创建了Vue UI，极大简化了开发体验，并让它变得更加平易近人。

首先，将CLI工具与图形界面相结合看起来有点奇怪，但正如你稍后将看到的，这种特殊的结合其实是非常强大和高效的。

使用Vue UI重新创建项目

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

Vue UI是使用自己的UI框架构建的，不需要Electron就可以在浏览器中运行它。只需在目录中运行vue ui命令即可：

vue ui

启动Vue项目管理器，并选择“项目”选项卡。目前页还没有任何项目。我们需要通过UI创建新项目或导入使用CLI创建的项目。让我们看看如何创建一个新项目。

我们切换到“创建”选项卡，浏览到应用程序所需的目录，然后单击“在此处创建新项目”。

在下一个页面，我们为项目文件夹命名，并选择包管理器。

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

在下一个页面，我们选择要安装的插件。

最后，我们为选择安装的插件设置配置。然后，我们点击Create Project按钮。

创建好项目后，我们将被重定向到项目的仪表盘页面。

使用Vue UI项目仪表盘

“插件”部分列出了所有已安装的插件。要安装新插件，点击添加插件按钮即可。

我们可以搜索我们需要的插件，找到后点击Install按钮。在我们的例子中，我们搜索并安装了bootstrap-vue插件。

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

在文件变更选项卡中，我们可以看到受影响的文件。在这里，我不想提交任何更改，所以我点了Skip按钮。

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

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

在Configuration部分，我们可以添加的插件进行自定义设置。在这里，我们配置了Vue CLI和ESLint插件。

Tasks部分为我们提供了一种便捷的方式来使用Vue CLI和其他插件提供的可用命令。在这个页面，我选择了serve任务。我们可以通过点击Parameters按钮来改变它的参数。

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

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

当我们切换到Output选项卡，可以获取到任务日志。

当我们切换到Analyzer选项卡时，会得到一个有关整个项目信息的图表。

build任务类似于serve任务，只是前者生成可用于生产环境部署应用程序包。

我们可以使用与serve任务相同的方式为serve任务设置参数。

inspect任务的Output字段为我们提供了Webpack的配置信息。

我们使用Vue UI成功重新创建了我们的项目。正如我们所看到的，在使用GUI时，创建和配置过程变得更容易，也更愉快。

结论

在本文中，我们介绍了Vue CLI是一个完整的用于现代Web开发的系统。它让我们能够快速、轻松地使用整个Vue生态系统和第三方工具。当然，我们不一定要使用Vue CLI，这是一种自主的选择。但如果是出于提高开发速度和质量方面的考虑，那么使用Vue CLI可以帮你更好地创建、管理和部署项目。

英文原文

https://code.tutsplus.com/tutorials/boost-your-vuejs-workflow-with-vue-cli-3--cms-32232

创作场景

如何使用 Vue CLI 3 加速你的开发工作流？