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

译者按： Vue.js相干的开拓器材越来与好用！

跟着最新的不变版本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" 页面，选择将这些代码变换提交。

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

设置你的项目

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!