Vue UI：Vue开发者必不可少的工具

译者按： Vue开发工具愈来愈好用了！

• 原文: Vue UI: A First Look
• 译者: Fundebug

本文采用意译，版权归原做者全部

随着最新的稳定版本Vue CLI 3即将发布，是时候来看看有什么新鲜有趣的特性了。基于整个Vue.js开发者社区的反馈而大幅度改良，该版本提供了不少以工做流为中心的工具。

我想会提高每一位Vue.js的开发者工做效率的特性就是Vue UI。一个可视化图形界面方便你去建立、更新和管理项目的方方面面。

今天，我会跟你一一介绍Vue UI的beta版本中可用的功能。

开始

首先，咱们确保安装了最新的Vue CLI。打开Terminal，输入：

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

你可使用-V来查看一下刚刚安装的版本：

vue -V
# 应该会输出下面的结果
3.0.0-rc.3
复制代码

为了初始化你的Vue UI，在一个干净的目录下输入：

vue ui
复制代码

该命令会自动打开你的浏览器，你要确保当前目录下没有其余项目，浏览器展现的页面以下：

Vue UI默认会显示第一个Tab，也就是项目管理，你能够很轻松查看当前建立的项目。

建立第一个项目

要建立一个新的项目，点击中间的"Create"按钮：

项目建立工具会让你选择在哪一个目录下建立(以防万一，你想在不一样的目录下建立)；当文件夹被选中后，点击"Create a new project here"按钮，而后会进入一个步步指导：

为项目选择一个目录，选择你喜欢的项目/包管理器(npm或则yarn)，而后点击"Next"：

接下来，你会被要求配置预装选项；在大多数状况下，默认的配置足够使用。本文做为一篇指导文章，咱们选择手动配置。选择"Maual"，而后点击"Next"：

有很是多的选项能够配置；使用Babel、TypeScript；启用Vue组件Vuex、Vue Router；最后基于你的选择，会有一个相应的附加库配置：

我选择使用了一个ESLint和开启单元测试，我选择加Prettier和Jest放到个人技术栈中，而且当我保存/提交代码的时候自动作Lint。

最后，点击"Create Project"，会提醒你保存当前的配置，而后建立项目。

当项目建立成功之后，Vue UI会展现该项目配置的全部插件：

在这里，你能够更新插件，安装新插件，打开Vue DevTools等等。

添加插件

当你的项目建立好后，安装新的插件很是简单。点击"Add Plugin"，而后搜索你须要的插件：

你会发现有些插件标记着"Official"，那么这些由Vue.js官方开发。

选择你要得插件，而后点击"install"按钮：

注意在当前的版本下，你一次只能安装一个插件。基于你安装的插件，你可能会被要求做出一些对该插件相关的额外配置。当安装完毕，你能够切换到"Files changed"页面，选择将这些代码变更提交。

最后，咱们新安装的插件已经在已安装插件列表中了：

配置你的项目

Vue UI容许你在项目建立后依然能够修改配置。点击左侧第二个配置图标，而后你就能够看到当前的配置：

咱们能够轻松修改全部可选项。我建议你阅读文档了解哪些能够修改。

执行项目任务

另外一个颇有用的功能是Vue UI可让你直接执行你项目中定义的任务(npm scripts)。好比，咱们要运行开发版本的服务器：

该界面提供了不少有趣的技术细节，好比包大小、加载时间提示、详细的每个资源建立耗费的时间。若是你想知道更详细的信息，点击"Analyzer"选项：

若是你想要对应用的大小作优化，那么你能够用这个工具来分析哪些静态资源太大，能够适当减少。

本地化

在早些时候，咱们安装了Vuei18n插件。当咱们安装完这个插件，一个额外的子菜单，提供了咱们配置本地化的选项。

当咱们访问本地化配置的页面的时候，咱们会发现“English"已是默认配置，而且有一个默认的例子"hello i18n!"。咱们本地化全部的文本，咱们须要选择添加咱们要支持的语言。首先，点击"Add locale"按钮：

在本示例中，咱们选择添加法语"fr"，接下来咱们能够将全部的英语都翻译到对于的法语。

若是咱们去查看代码，咱们能够看到对应的代码文件：

你能够看到，虽然仍是Beta版本，Vue UI将会是一个很是有用的工具。

关于Fundebug

Fundebug专一于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎你们免费试用！

版权声明

转载时请注明做者Fundebug以及本文地址：
blog.fundebug.com/2018/07/10/…