随着最新的稳定版本Vue CLI 3即将发布,是时候来看看有什么新鲜有趣的特性了。基于整个Vue.js开发者社区的反馈而大幅度改良,该版本提供了很多以工作流为中心的工具。
我想会提升每一位Vue.js的开发者工作效率的特性就是Vue UI。一个可视化图形界面方便你去创建、更新和管理项目的方方面面。
今天,我会跟你一一介绍Vue UI的beta版本中可用的功能。
开始
首先,我们确保安装了最新的Vue CLI。打开Terminal,输入:
npm install -g @vue/cli# ORyarn global add @vue/cli
你可以使用-V来查看一些刚刚安装的版本:
vue -V# 应该会输出下面的结果3.0.0-rc.3
为了初始化你的Vue UI,在一个干净的目录下输入:
vue ui
该命令会自动打开你的浏览器,你要确保当前目录下没有其他项目,浏览器展示的页面如下:
![f853a3f390ebcad12d518c11ae91d040.png](https://i-blog.csdnimg.cn/blog_migrate/5e8985a3863f369667d2a7e29484537f.jpeg)
Vue UI默认会显示第一个Tab,也就是项目管理,你可以很轻松查看当前创建的项目。
创建第一个项目
要创建一个新的项目,点击中间的"Create"按钮:
![45c23250a5f19c23fe66cb7eee5437a3.png](https://i-blog.csdnimg.cn/blog_migrate/2d1a0568a3595e3cc45b7432e957d3ce.jpeg)
项目创建工具会让你选择在哪个目录下创建(以防万一,你想在不同的目录下创建);当文件夹被选中后,点击"Create a new project here"按钮,然后会进入一个步步指导:
![28f2d6c38bc1060eb6cc7735893ab647.png](https://i-blog.csdnimg.cn/blog_migrate/ab8ed2913be27fc9e85766756b0565f5.jpeg)
为项目选择一个目录,选择你喜欢的项目/包管理器(npm或则yarn),然后点击"Next":
![4051c69f317ff0d1154b367fa3d22bba.png](https://i-blog.csdnimg.cn/blog_migrate/525a68ca60dec5521cce3acccb2cfa9f.jpeg)
接下来,你会被要求配置预装选项;在大多数情况下,默认的配置足够使用。本文作为一篇指导文章,我们选择手动配置。选择"Maual",然后点击"Next":
![e5300e34c6d857e47d1843fa2014134f.png](https://i-blog.csdnimg.cn/blog_migrate/02cd7b2a58d97530d4d3e52c29602f24.jpeg)
有非常多的选项可以配置;使用Babel、TypeScript;启用Vue组件Vuex、Vue Router;最后基于你的选择,会有一个相应的附加库配置:
![1b3b001b9e1d9f7ed2c4865af2782447.png](https://i-blog.csdnimg.cn/blog_migrate/55cffba083d3054ad24e9fbee7093dd4.jpeg)
我选择使用了一个ESLint和开启单元测试,我选择加Prettier和Jest放到我的技术栈中,并且当我保存/提交代码的时候自动做Lint。
最后,点击"Create Project",会提醒你保存当前的配置,然后创建项目。
![6820cb48a15ee566d1f343dff842237d.png](https://i-blog.csdnimg.cn/blog_migrate/610fb6558cb7f16f6953593dc349305a.jpeg)
当项目创建成功以后,Vue UI会展示该项目配置的所有插件:
![c1f9375ea5d265e8008121c4f6c139ab.png](https://i-blog.csdnimg.cn/blog_migrate/c9345cc82e29ce1fc7c926625b106bce.jpeg)
在这里,你可以更新插件,安装新插件,打开Vue DevTools等等。
添加插件
当你的项目创建好后,安装新的插件非常简单。点击"Add Plugin",然后搜索你需要的插件:
![83888ef0f6f59bacf21d8f3834793739.png](https://i-blog.csdnimg.cn/blog_migrate/d83ad5f882e1e215781f98abe5940121.jpeg)
你会发现有些插件标记着"Official",那么这些由Vue.js官方开发。
选择你要得插件,然后点击"install"按钮:
![a8afd11ce52600be1dc5760efda40d6b.png](https://i-blog.csdnimg.cn/blog_migrate/7b6514a4c3908cc4da157f9423dcdd8b.jpeg)
注意在当前的版本下,你一次只能安装一个插件。基于你安装的插件,你可能会被要求作出一些对该插件相关的额外配置。当安装完毕,你可以切换到"Files changed"页面,选择将这些代码变动提交。
最后,我们新安装的插件已经在已安装插件列表中了:
![be96237e53d723ed5dc45a7bd2347435.png](https://i-blog.csdnimg.cn/blog_migrate/b2b051ce111a4632327609f2b7983f2c.jpeg)
配置你的项目
Vue UI允许你在项目创建后依然可以修改配置。点击左侧第二个配置图标,然后你就可以看到当前的配置:
![2ff49696cc955148f29a4908617664aa.png](https://i-blog.csdnimg.cn/blog_migrate/fb81666b3793ef1c7d14dabfed5df911.jpeg)
我们可以轻松修改所有可选项。我建议你阅读文档了解哪些可以修改。
执行项目任务
另一个很有用的功能是Vue UI可以让你直接执行你项目中定义的任务(npm scripts)。比如,我们要运行开发版本的服务器:
![2f8686894e6c215d0c2d975b55fa27e5.png](https://i-blog.csdnimg.cn/blog_migrate/0082bf99f3dfcee8f83e67fdd2b1d6b7.jpeg)
该界面提供了很多有趣的技术细节,比如包大小、加载时间提示、详细的每一个资源创建耗费的时间。如果你想知道更详细的信息,点击"Analyzer"选项:
![05a117a49c0a16ec3cbb513ce73344a5.png](https://i-blog.csdnimg.cn/blog_migrate/18cae2cb0114d3e880b28c44b0b41e50.jpeg)
如果你想要对应用的大小做优化,那么你可以用这个工具来分析哪些静态资源太大,可以适当减小。
本地化
在早些时候,我们安装了Vuei18n插件。当我们安装完这个插件,一个额外的子菜单,提供了我们配置本地化的选项。
![27b938adeb99308ba0f53be114a4cf53.png](https://i-blog.csdnimg.cn/blog_migrate/f933e2dad14ea3bf5511840eb6b7bd77.jpeg)
当我们访问本地化配置的页面的时候,我们会发现“English”已经是默认配置,并且有一个默认的例子”hello i18n!”。我们本地化所有的文本,我们需要选择添加我们要支持的语言。首先,点击"Add locale"按钮:
![af60e8951e4a78a655d8771aaf1798d7.png](https://i-blog.csdnimg.cn/blog_migrate/150bbf484f5f5e20edeeb9aa4a9983ce.jpeg)
在本示例中,我们选择添加法语”fr”,接下来我们可以将所有的英语都翻译到对于的法语。
![92dec9ad5b409b72130f539c0814f9fc.png](https://i-blog.csdnimg.cn/blog_migrate/e1946aed4a73446eb21bd80120d05077.jpeg)
如果我们去查看代码,我们可以看到对应的代码文件:
![82971254c4e33bbb12b4aa1c4b8bcff0.png](https://i-blog.csdnimg.cn/blog_migrate/90a69701dea316047bd8e19f35e49eb4.jpeg)
你可以看到,虽然还是Beta版本,Vue UI将会是一个非常有用的工具。