Vue-cli 3 中新的用户图形化界面

翻译 科大大 ⋅ 于 2周前 ⋅ 最后回复由 laaa 1周前 ⋅ 169 阅读 ⋅ 原文地址
这是一篇社区协同翻译的文章,已完成翻译,更多信息请点击 协同翻译介绍

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 中查阅。

科大大 翻译于 2周前

创建项目

让我们从头开始创建一个新的 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. 浏览器跳转该地址后应如下显示:
科大大 翻译于 2周前

file

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

file

应用的功能

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

科大大 翻译于 2周前

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

项目插件

file

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

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

科大大 翻译于 2周前

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

项目配置

file

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

alex 翻译于 2周前

项目任务

file

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

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

XiaoTeng 翻译于 2周前

结论

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

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

Summer 翻译于 2周前

原文地址:https://medium.com/@brandonl.4231/gettin...

译文地址:https://vuejscaff.com/topics/77/new-user...


本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

回复数量: 2
  • laaa
    2周前

    已经安装非常感谢

  • laaa
    2周前

    目前更新已有中文版 vue ui 喜欢的小伙伴可以试试

暂无评论~~
您需要登陆以后才能留下评论!

Vue.js 官方中文文档

前端开发环境部署