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

最新推荐文章于 2024-07-05 07:00:00 发布

糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖

最新推荐文章于 2024-07-05 07:00:00 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cpongo4/article/details/89148851

本文介绍VueCLI3，一个强大的工具集，用于提升Vue.js项目开发速度和简化工作流程。通过基于插件的架构，VueCLI3提供了一套官方预装插件，集成前端生态系统的一流工具。此外，VueCLI3还提供了图形用户界面VueUI，让项目创建、更新和管理更加直观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们很难想象没有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文件：

\u0026lt;template\u0026gt;  \u0026lt;h1\u0026gt;Hello, Vue!\u0026lt;/h1\u0026gt;\u0026lt;/template\u0026gt;

然后在同一个目录运行：

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文件：

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

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

$\"\"$