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

没有命令行界面（CLI）工具的帮助，我们几乎无法想象现代Web开发。 通过减少重复繁琐的任务，它们极大地促进并加快了开发流程。 手动设置项目，具有所有的上线，构建，测试，预处理，优化和依赖项跟踪功能，听起来不是一件有趣的工作，对吗？

这就是为什么所有现代客户端开发框架（例如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是一组用于快速原型制作，易于应用程序构建和有效项目管理的工具。 它由三个主要工具带组成：

• CLI是全局安装的npm软件包，它通过vue命令提供核心功能。 它使我们能够轻松地vue create一个新项目（ vue create ）或只是快速制作原始想法的原型（ 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-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 ，可轻松创建，更新和管理复杂项目。
• UI插件API。 Vue UI公开了一个插件API，我们可以使用它向CLI的GUI版本添加自定义功能。
• 来自社区的许多有用的插件。

Vue CLI入门

在了解了Vue CLI的魔力之后，是时候实践一下了。 首先，我们需要安装Vue CLI3。它需要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文件：

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

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 on save”（保存时使用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文件夹中，我们具有以下文件和文件夹：

• 资产文件夹用于存储应用程序所需的静态资源，这些资源将包含在捆绑过程中。
• 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页面 。

开发项目

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

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

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

serve命令基于webpack-dev-server启动具有正常工作的Hot Module Replacement（HMR）功能的开发服务器。 这意味着当我们在组件中进行更改并保存时，它们将立即反映出来，并且页面将在浏览器中更新。

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

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

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

vue add bootstrap-vue

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

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

当我们指向浏览器中的“ 关于”页面时，我们应该看到使用Bootstrap更新和样式化的页面：

建立生产项目

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

构建应用

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

npm run build --modern

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

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

探索dist文件夹

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

index.html文件将是应用程序的入口点。 它包含link和script元素，这些元素将从css和js文件夹加载所有必需CSS和JavaScript文件。

因此，现在我们准备将我们的应用程序部署到生产服务器。 有很多选择。 您可以通过访问“ 部署”页面了解许多信息。

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

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是自定义预设的示例。 在这里，我们选择Manual 。

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

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

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

使用Vue UI项目仪表板

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

在这里，我们可以搜索所需的插件，找到后，请点击“ 安装”按钮。 在本例中，我们搜索并安装bootstrap-vue插件。

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

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

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

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

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

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

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

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

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

当我们切换到“ 分析器”选项卡时，我们得到一个漂亮的图形，该图形总结了整个项目的信息。

build任务与serve任务相似，但前者会产生可用于部署应用程序的生产捆绑包。

我们可以按照与serve任务相同的方式为build任务设置参数。

inspect任务的“ 输出”字段为我们提供了有关已解决的Webpack配置的信息。

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

结论

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

当然，我们的Vue.js项目不需要使用Vue CLI。 这完全是我们的选择。 但是，当我们追求速度和质量时，Vue CLI可以帮助您以专业的方式创建，管理和部署我们的项目。

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