By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
Vue-cli 3 中新的用户图形化界面
2019-04-18 10:59:12    280    0    0
emengweb

 

file
 

 

本文默认读者已经熟悉 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. 浏览器跳转该地址后应如下显示:

 

file
 

 

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

 

file
 

 

应用的功能

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

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

 

项目插件

 

file
 

 

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

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

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

 

项目配置

 

file
 

 

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

 

项目任务

 

file
 

 

我将最好的功能留在了最后展示,因为这是我最喜欢的用户界面。上面的项目任务允许你通过 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 用户界面将会为我们的管理任务带来很多便捷,很期待他的最后发布。

上一篇: debian9安装@vue/cli 3脚手架报错scripts/postinstall的解决方法

下一篇: linux 中卸载 node 和 nvm

280 人读过
文档导航