使用 Vue CLI 用户界面工具用可视方式创建 Vue 应用程序

小编推荐： 掘金是一个面向 程序员 的高质量技术社区，从 一线大厂经验分享到前端开发最佳实践，无论是入门还是进阶，来掘金你不会错过前端开发的任何一个技术干货。

如今，大多数 JavaScript 框架通常都有某种命令行界面（CLI），使用户能够快速搭建脚手架并直接构建应用程序，而无需执行重复的设置任务。一些常见的有：

• Vue CLI
• Angular CLI
• Create React App
• Ember CLI

有时这些 CLI 会有很多配置，使用起来可能很有趣，但随之而来的是有点复杂，因为某些命令可能会有大量参数和 flags。

Vue CLI 引入了图形用户界面（GUI），它可以为我们节省大量时间，并且使用 CLI 构建和生成的 Vue 应用程序时让我们清楚地了解我们实际在做什么。

注意：UI工具目前一直处于测试版，并且可能会发生很多变化。

先决条件

• 您应该对 JavaScript 和 VueJS 有中等的理解
• 你应该安装 NodeJS 。

安装

您需要安装 Vue CLI 3。

npm i -g @vue/cli

安装完成后，在终端上输入 vue 你应该会看到以下内容。

vue
Usage: vue <command> [options]
Options:
-V, --version                         output the version number
-h, --help                            output usage information
Commands:
create [options] <app-name>           create a new project powered by vue-cli-service
add <plugin> [pluginOptions]          install a plugin and invoke its generator in an already created project
invoke <plugin> [pluginOptions]       invoke the generator of a plugin in an already created project
inspect [options] [paths...]          inspect the webpack config in a project with vue-cli-service
serve [options] [entry]               serve a .js or .vue file in development mode with zero config
build [options] [entry]               build a .js or .vue file in production mode with zero config
ui [options]                          start and open the vue-cli ui
init [options] <template> <app-name>  generate a project from a remote template (legacy API, requires @vue/cli-init)
config [options] [value]              inspect and modify the config
Run vue <command> --help for detailed usage of given command.

在这些选项中，您可以看到有一个 ui 的命令。这就是我们今天要探讨的内容。

...
ui [options]                          start and open the vue-cli ui
...

用脚手架搭建一个 Vue 应用程序

创建一个 Vue 应用程序所在的目录，我将其称为 vue-ui

mkdir vue-ui

然后用以下命令打开 Vue UI 工具

vue ui

这将在默认浏览器上打开 http://localhost:8001 ，这就是 Vue GUI。

我们可以非常直观地看到三个导航，这里我稍微解释以下：

• Projects(项目) – 将列出当前目录的项目，或者您使用此工具生成的项目
• Create(创建) – 将允许您创建新的 Vue 项目
• Import(导入) – 允许您从目录或远程 github 仓库导入项目。

在屏幕底部的状态栏上，您将看到当前目录所在的位置，在最右侧，您可以更改应用程序的主题。

我们来创建一个项目。 单击 Create(创建) 选项卡，然后单击 Create a new project here(在此处创建新项目) 按钮。

会出现一个创建新项目表单。让我们填写项目名称 scotch-vue 。

选择 npm 作为默认包管理器，并根据需要初始化git存储库。

按 next(下一步)，您将进入 presets(预设) 选项卡。这是我们添加 Vue 应用程序常见配置的地方。选择 Manual(手动) ，然后按 next(下一步) 按钮。

注意：如果您已保存过预设，它们将显示在此处，以便您可以选择它们。上面显示了我之前创建的 scotch-vue-preset 预设。

您将进入到 Features(功能) 页面，以便选择所需的插件和配置。 我主要使用以下配置：Babel，Router，CSS Pre-processors(预处理器)，Linter/Formatter(代码检查及格式化)，Unit Testing(单元测试)，Use Config Files(使用配置文件)。 向下滚动以查看所有配置。

所有选项都有一个 More Info(更多信息) 链接，该链接将在新选项卡中打开，包含有关要添加的插件/功能的文档。

最后，按 next(下一步) ，您将进入 configurations(配置) 部分。 您可以在这里自定义上一部分中添加的功能的配置。以下是我的配置：

在 CSS Pre-processors(预处理器) 上，选择 SCSS/SASS ;

在 Pick a linter / formatter config 配置上选择 ESLint + Prettier ;

在 unit testing(单元测试)解决方案中选择 Mocha + Chai 。

单击 Create Project(创建项目) 按钮 。 系统将询问您是否要为 settings/preset(设置/预设) 命名。 我在这里将该预设命名为 scotch-vue-preset 。 下次，您可以直接从这个预设中构建项目。

单击 Create Project(创建项目) 按钮 ， 将出现一个 loading ，告诉您项目创建的进度，并且项目创建完成后，将您带到项目控制台。

您可以通过单击左上角的应用程序名称在编辑器中打开该应用程序。

探索项目控制台

控制台分为四个部分：

1. Plugins（插件）

列出您的插件，并允许您将其他插件安装到当前项目中。

您可以单击右上角的 Install Plugins(安装插件) 按钮，以便搜索和安装插件。

2.Dependencies（依赖）

列出您的 npm 依赖项，并允许您添加/删除依赖项。

您可以单击右上角的 Install Dependencies（安装依赖项）按钮，以便搜索和安装依赖项。

3. Configurations（配置）

允许您修改应用程序的可配置部分。现在，你会看到两个选择：

3.1 Vue CLI configurations（配置）

3.2 Eslint Configuration（配置）

4. Tasks（任务）

任务允许您在应用程序上执行操作，这通常是在构建应用程序时执行的操作。 它们包括以下内容。 我直接从UI中获取了描述。

• Serve （服务） – 编译和热更新（用于开发环境）
• Build（构建） – 编译并压缩（用于生产环境）
• Lint（检查） – 检查并修复源文件
• Test（测试） – 运行 Mocha 单元测试
• Inspect（检查） – 检查 webpack 配置。

注 – 此处根据我们的配置列出了这些任务。 例如，我们没有列出E2E任务。

4.1 Serve （服务，编译和热更新（用于开发环境））

我们已经看到本节编译并热重新加载您的应用程序。 Serve 部分的第一部分允许您配置服务任务。

您可以单击 齿轮图标以配置服务任务。

more info(更多信息，查看详情)按钮将打开有关 vue-cli-service 的文档。

然后单击 Run Task（运行任务） 按钮将更新 Dashboard（控制台） 选项卡，并在新选项卡中打开应用程序 http://localhost:8080 ，如我们在服务任务配置中指定的那样。 Run Task（运行任务）按钮更改为 Stop Task(停止任务)。

这是打开的应用程序，默认的 vue-cli 应用程序，带有文档链接。

4.1.1 Dashboard（控制台） 选项卡

控制台选项卡显示有关应用程序包的各种统计信息，您可以检查它以查看文件大小，甚至加载文件的加载速度。

4.1.2 Output（输出） 选项卡

此选项卡显示任务进程的日志。

4.1.3 Analyzer（分析） 选项卡

分析选项卡尝试分析您的代码，并创建一个显示代码的各种依赖关系的图表。 在下面的屏幕截图中，我们看到紫色部分代表我们编写的代码（即使它已生成），绿色部分代表我们从依赖项导入的代码。

4.2 Build（构建，编译并压缩（用于生产环境））

Build(构建) 部分与 Serve(服务) 部分非常相似，只是它生成可用于部署应用程序的生产包。

单击配置构建任务（齿轮图标）也将打开配置，以允许您指定环境，输出目录，甚至选择它是Web应用程序，库还是Web组件。

我们不再解释不同的选项卡，因为和我们在上一节中解释的非常类似，但请注意 Analyzer（分析） 选项卡 下多了 chunked app 选择。

4.3 Lint（检查）

Lint（检查）就没什么好说的了。它将检查你的代码并给你一个输出。

4.4 test:unit（单元测试）

这将允许我们为我们的应用程序运行单元测试。我们只需单击 Run Task（运行任务），然后查看输出

4.5 Inspect（检查）

这将在json文件中生成webpack的配置。

总结

我们已经看到使用 Vue UI 工具从头开始构建一个新的 VueJS 应用程序是多么容易。 尽管仍处于测试阶段，但它可以让您从零开始在几秒钟或几分钟内构建应用程序。 希望您发现该工具有用并更频繁地使用它，并留意新版本。

如果您喜欢更加深入的研究，可以查看 Vue CLI UI 源代码 。

如果你觉得 Vue UI 工具界面漂亮，你可以非常快乐的使用 Vue UI 库 。

英文原文： https://scotch.io/tutorials/creating-vue-apps-with-the-vue-ui-tool