Vue UI

Vue-UI 是一个图形界面，允许您控制 Vue 属性，而无需过多了解命令行的工作原理或单个文件（例如 package.json 或 webpack 文件）的配置方式。 Vue-UI 提供了对模块分析等信息的轻松访问，该信息显示了包依赖项对项目的影响，从而导致文件大小膨胀。您还可以查看项目的编译文件大小，并比较项目在各种设备和互联网速度上加载所需的时间。要开始使用 Vue-UI，您可以通过打开终端窗口并运行 vue ui 命令在任何地方实例化它。在撰写本文时，Vue-UI 仍处于测试阶段。如果您在使用此工具时遇到任何问题，请停止该命令，然后再次运行 vue ui。

Vue-UI 可用于新项目和现有项目。通常，您会在项目开始时使用 Vue CLI 选择预设，例如要使用的 SCSS 编译器、测试框架或 lint 方法。使用 Vue-UI，即使是新的 Vue 开发人员也可以随时轻松配置 Vue 预设，包括晦涩的 Webpack 设置，例如输出目录或打开源映射。以下屏幕截图显示了常规设置页面：

Figure 1. Figure 3.13: Easily configured project settings within the Vue-UI

npm 包系统非常庞大。然而，对于有经验的用户来说，导航非常容易。通常，经验丰富的开发人员会通过命令行安装包，然后命令行会自动更新 package.json 文件并使用新包锁定该文件。锁定文件是生成的记录保存程序，记录您随项目提交的 npm 包所需的相互依赖关系。Vue 有称为插件的特定包，它们是 Vue 的特殊 npm 包，不仅安装依赖项，而且通常会以有用的方式为您增强项目。例如，如果您安装了 vue router cli 插件，它会在您的项目中自动生成一个 route.js 文件，以便您更快地开始工作。

当尝试快速构建更复杂的组件或项目时，Vuetify 是一个有用的框架，它包含许多常见的 UI 元素和组件，例如按钮和输入字段，因此您可以专注于界面而不是构建单个组件本身。如果您使用 Vue CLI 插件包安装 Vuetify，它将自动为您设置 Vuetify。

我们现在已经了解了 Vue-UI，以及新手和经验丰富的开发人员如何使用此工具来管理项目和依赖项。接下来，我们将使用 Vue-UI 创建并运行 Vue.js 项目。

练习 3.03：从 Vue-UI 创建和构建新项目

在本练习中，您将逐步学习如何使用 Vue-UI 来设置和安装 Vue.js 项目。您还需要安装并使用 Vuetify 库作为依赖项。安装后，您将使用 Vue-UI 运行该项目，并看到 Vuetify 元素在页面上运行。

要访问本练习的代码文件，请参阅 https://packt.live/35jOsAH 。

打开命令行终端并运行 vue ui 命令。您将看到以下屏幕：

Figure 2. Figure 3.14: The Vue-UI without any projects in it
单击 Create 开始新项目。导航到您要安装项目的文件夹：

Figure 3. Figure 3.15: Installing the project
在 Project 文件夹字段中，编写 demo-ui，选择 yarn 作为包管理器，然后单击Next，如下图所示：

Figure 4. Figure 3.16: Vue-UI’s project creation interface
选择 Manual，您将进入 Features 屏幕。在此屏幕上，选择 Babel、CSS Preprocessors、Linter/Formatter 和 Use config files。图 3.22 显示了选择了以下选项的屏幕截图：

Figure 5. Figure 3.17: Enable features for your new project in the Vue-UI
选择 Sass/SCSS（带有 dart-sass）预处理器和 ESLint + Prettier 配置，并启用以下屏幕截图中显示的附加 lint 功能：

Figure 6. Figure 3.18: Enable configuration options for your new project in the Vue-UI
出现提示时，选择 Continue without saving the preset，然后等待项目安装。您应该看到如图 3.19 所示的屏幕：

Figure 7. Figure 3.19: Be patient as Vue creates and installs your project dependencies
导航到插件页面，单击 Install dependency，搜索 vuetify，然后安装 vue-cli-plugin-vuetify。在 Dependencies 页面可以观察到 vuetify 已经自动添加到项目依赖列表中，如下：

Figure 8. Figure 3.20: Clean interface for dependency search and installation
导航到项目任务页面并单击服务任务。然后，单击 “运行任务” 图标，如下图所示：

Figure 9. Figure 3.21: The serve task dashboard contains the Run task button
等待 Vue 编译应用程序。准备就绪后，单击“打开应用程序”按钮，如图 3.22 所示：

Figure 10. Figure 3.22: The Open app button will take you straight to your app in the browser

您应该在浏览器中看到您的应用程序，如以下屏幕截图所示：

Figure 11. Figure 3.23: On http://localhost:8080, you should see a Vuetify styled page
要准备该项目进行生产，请返回 Vue-UI 浏览器选项卡，然后单击项目任务中的构建选项卡。单击“启动任务”按钮旁边的“参数”按钮。打开现代模式并确保输出目录设置为 dist。现代模式将您的代码转换为两个版本，一种是轻量级的，针对现代浏览器，另一种是冗长的，用于支持旧版浏览器。编译后您将在此处找到文件。您的屏幕应显示类似于以下屏幕截图的内容：

Figure 12. Figure 3.24: Vue-UI build parameters
要构建此项目以用于生产，请单击“启动任务”按钮并让它运行。