emengweb 's Blog

 

本文默认读者已经熟悉 Vue.js 和 Vue-cli ，对应的文档是 https://vuejs.org/v2/guide/ 和 https://github.com/vuejs/vue-cli。

在本文撰写出来的前一天，Vue 核心开发团队发布了 Vue 命令行工具的 beta-15 版本。其新增了基于 Web 的用户图形化界面并修复了一些 bug 和改进了性能。这个工具允许开发人员以可视化的方式创建一个新的 Vue 项目，并可以实时监控应用性能，为现有项目增加插件等等。这是一个很重要的改进，因为通过这个工具可以轻松地启动和维护任何类型的 Vue.js 应用。现在来让我们深入了解它的一些功能。这个版本的更新日志可以在 Vue-cli 的 github 中查阅。

创建项目

让我们从头开始创建一个新的 Vue 项目。

1. 打开新的终端 / 命令行窗口。
2. 使用 npm i -g -u @vue/cli 安装或更新到 beta-15 版本，Mac/linux 用户可能需要使用 sudo npm i -g -u @vue/cli。
3. 更新后运行 vue ui ，你会看到命令行中有 http://localhost:8000 这样的地址，如果浏览器没有自动打开，你可以在浏览器中手动输入该地址。
4. 浏览器跳转该地址后应如下显示：

 

5 . 点击跳转到要创建项目的文件夹并单击绿色的「在此创建新项目」来创建。
6 . 选择手动配置，然后会进入功能页面，你可以引入 Typescript 、路由、测试、CSS 预处理和 Vuex 等功能。

 

应用的功能

7 . 选择好相应配置后，点击「创建项目」开始安装，然后就可以在命令行中看到 vue-cli 的命令了。
8 . 完成之后，你就会有一个只有你配置好功能的全新的 Vue.js 项目。

现在让我们看看如何使用这个新的图形化界面来执行构建任务，显示应用程序的各项指标，并在项目创建后添加插件。

项目插件

 

许多团队已经开发了 Vue-cli 3 的插件

第一部分，项目插件，它允许你在创建应用程序后向应用程序注入主要功能。这里有数百个流行的工具和框架的插件。想要将 GraphQL 添加到应用程序而不过度配置？只要安装 Apollo 插件就可以设置模板配置了。

插件系统是从 v3 alpha 的时候就有的，最新的 UI 却让整个查找和安装操作变得非常直观。很多时候当我们尝试新东西时，需要花很多时间来搞清楚他们怎么工作在一起的，而此功能很好地解决了这个痛点。

项目配置

 

任何在过去需要配置如 webpack, gulp, eslint, babel, or typescript 等多种配置文件的人，将会很喜欢这个新的项目配置 UI 。此功能提供了一个简洁的界面，让你直接调整和配置这些信息，而不用迷失在多重内嵌的 JSON 对象配置信息中。

项目任务

 

我将最好的功能留在了最后展示，因为这是我最喜欢的用户界面。上面的项目任务允许你通过 GUI 界面运行 npm script 脚本命令，同时为我们提供了详细的项目数据统计。该数据使我们轻易的查看应用加载和连接的资源或设备，且它还可以使开发者快速的找出那些可能浪费资源的依赖。

大部分功能还可以进一步定制的，如 vue-cli-service serve 和 「Start/Stop」中间的设置图标附带可选选项，该选项允许你将 NODE_ENV 默认值 dev 改为 prod 。特别是如果项目资源需要 https 去访问，我们可以手动的去修改 localhost 的 url 地址或 port 端口。

结论

感谢 Vue 团队为我们提供了这么便捷的工具，推荐大家在个人项目上用用这个工具。目前 vue-cli v3 还是在 BETA 阶段，你也许会遇到一些 Bug，所以目前不建议在生产环境中使用。我在把玩的时候也碰到了一个非 UI 的问题，在安装时候出了错，是 NPM 配置的问题，修改了下配置就 fix 了。

总的来说，这个全新的 vue-cli 用户界面将会为我们的管理任务带来很多便捷，很期待他的最后发布。