vue-cli改版 3.0betaUI界面初体验

4,161 阅读2分钟

听说vue-cli3.0.0-rc.3版本的发布了,那估计距离稳定版本也不远了。

你是不是还在看这个

不不不,这些我都不感兴趣,骚年,来让你3个命令行,你有我快?

其中GUI特别有意思。赶紧来尝尝鲜。对于开发者也越来越友好。

首先确定该安装的都装了,直接进入到@vue-cli安装进程,mac记得sudo

> npm i -g @vue/cli

yarn

> yarn global add @vue/cli

别误会,vue-cli@vue/cli不是同一个源。@是npm账户下作用域,和本文暂时没关系。

安装完后检查下

> vue -V
> 3.0.0-rc.3

ok,创建个干净的文件夹

> mkdir newVue
> cd newVue/
> vue ui

然后就开始创建了,并且浏览器会自动打开http://localhost:8001/project/select,进入到项目管理器,emmm....上次是english,应该是翻译了

在这个界面,我们可以看到一些辅助功能。

先创建一个项目

设置好下一步

这里我们选择手动。

在这可以选择要用什么样的插件,这些插件在创建项目的时候用的较多。如果要用其他插件的话,到后面我们可以去搜索其他插件安装。继续下一步

其他功能里默认启用lint每次保存时自动检查。linter配置这里我们选第一个,仅用eslint的语法提示创建项目,创建项目

这里让我们将配置预设,下次可以快捷配置。

点击创建项目

创建完毕后,会自动进入到项目详情页

先到左上角添加插件去安装我们开发需要的插件,

目前只能单个安装,或许是考虑到测试版本依赖包的缘故。我们安装一个PWA插件。

ps:这个gif有点大,谅解下哈。

安装完毕后自动进入到插件安装配置页面,并选择配置提交。

果然是没有翻译完全。在配置页,可以进行项目插件的相关配置。

插件的其他配置可以自行探索,主要将大部分插件配置可视化操作,不用那么苦13的找文档去了。给尤大点个👍先。

既然有plugins 那肯定少不了npm run dev吧?