译者注：Vue.js相关的开发工具越来越好用了！随着VueCLI3的最新稳定版本即将推出，是时候看看有哪些有趣的新功能了。根据整个Vue.js开发者社区的反馈进行了极大改进，该版本提供了许多以工作流为中心的工具。我认为可以改进每个Vue.js开发人员工作的功能是VueUI。可视化图形界面允许您创建、更新和管理项目的各个方面。今天，我将向您介绍VueUI测试版中可用的功能。入门首先，让我们确保安装了最新的VueCLI。打开终端并输入：npminstall-g@vue/cli#ORyarnglobaladd@vue/cli您可以使用-V查看一些刚刚安装的版本：vue-V#应该输出以下结果3.0.0-rc.3for初始化对于你的VueUI，在一个干净的目录中输入：vueui这个命令会自动打开你的浏览器。您需要确保当前目录中没有其他项目。浏览器显示的页面如下：VueUI默认会显示***Tab，即项目管理，可以方便的查看当前创建的项目。创建第一个项目要创建一个新项目，点击中间的“创建”按钮：项目创建工具会让你选择在哪个目录中创建它（以防万一，你想在不同的目录中创建它）；当文件夹被选中后，点击“在这里创建一个新项目”按钮，然后进入一步一步的指导：为项目选择一个目录，选择你喜欢的项目/包管理器（npm或yarn），以及单击“下一步”：接下来，系统会要求您配置预装选项；在大多数情况下，默认配置就足够了。本文为指导文章，我们选择手动配置。选择“Mual”，点击“Next”：配置选项有很多；使用Babel、打字稿；启用Vue组件Vuex、VueRouter；***根据你的选择，会有相应的附加库配置：我选择使用ESLint并开启单元测试，我选择将Prettier和Jest添加到我的技术栈中，并在我保存/提交时自动执行Lint代码。***，点击“CreateProject”，会提示保存当前配置，然后再创建工程。项目创建成功后，VueUI会显示项目中配置的所有插件：在这里，您可以更新插件、安装新插件、打开VueDevTools等。添加插件创建项目后，安装新插件很容易。点击“添加插件”，搜索你需要的插件：你会发现一些标有“官方”的插件，这些都是Vue.js官方开发的。选择你需要的插件，点击“安装”按钮：注意，在当前版本中，你一次只能安装一个插件。根据您安装的插件，您可能会被要求进行一些与该插件相关的额外配置。安装完成后，您可以切换到“文件已更改”页面并选择提交这些代码更改。***，我们新安装的插件已经在已安装插件列表中：ConfigureyourprojectVueUI允许您在创建项目后修改配置。点击左边第二个配置图标，然后就可以看到当前的配置：我们可以很方便的修改所有可用的选项。我建议您阅读文档以查看可以修改的内容。执行项目任务另一个有用的特性是VueUI允许您直接执行项目中定义的任务（npm脚本）。例如，我们要运行服务器的开发版本：界面提供了很多有趣的技术细节，比如包大小、加载时间提示、每个资源的详细创建时间。如果你想知道更详细的信息，点击“分析器”选项：如果你想优化应用程序的大小，那么你可以使用这个工具来分析哪些静态资源过大，可以适当减少。本地化早些时候，我们安装了Vuei18n插件。当我们安装这个插件时，一个额外的子菜单为我们提供了配置本地化的选项。当我们访问本地化配置页面时，我们会发现“English”已经是默认的版本，并且有一个默认的例子“helloi18n!”。我们本地化了所有的文字，我们需要选择添加我们想要支持的语言。首先，点击“Addlocale”按钮：在这个例子中，我们选择添加法语“fr”，那么我们就可以将所有英文翻译成相应的法语。如果我们转到代码，我们可以看到相应的代码文件：你可以看到，虽然仍处于测试阶段，但VueUI将是一个非常有用的工具。原文：VueUI:AFirstLook本文采用意译，版权归原作者所有。
