文章目录
Vue CLI 3.0更新后，提供了一套全新的可视化Vue项目管理器 —— Vue UI。所以要想使用它，你的Vue CLI版本必须要在v3.0以上。
一. 启动Vue UI
Vue UI的启动命令很简单。选择好你要创建项目的存放目录，接着终端（我这里使用的是vscode）执行：
vue ui
它会自动跳转到你的默认浏览器并打开8000端口，你会看到：
这就是Vue UI的界面，在这里我们可以实现对Vue项目的全可视化操作。接下来我们就一一演示它的功能。
二. 创建项目
前一篇中我们演示了使用命令的方式创建了一个顶配的Vue项目。这里就简单选配一下吧，重点是感受这个可视化的过程，就很nice！首先点击创建：
2.1 创建项目文件
可以看到我们之前创建的bbsapp的项目。这里我们需要继续点击下方的 + 在此创建新项目 绿色按钮：
可以看到这一步相当于之前的命令：
vue create vueuiapp
不过这里可选择的配置项会更多，比如包管理器（npm），需不需要新手引导的文件，即是否创建空白项目等等。这都是使用命令行创建所不能带给我们的。
2.2 选择配置方案
我们之前命令行创建的话，只会有这里的前三个选项：
Vue UI中还给我们提供了第四种预设：远程Git仓库拉取。 不过我们仍然要选择手动配置。
2.3 自定义的可选配置项
这一步在选择项目所需的配置项时，就很直观了：
页面内也有很多提示和查看详情的入口，相较于之前命令行的方式，就很银杏了，哈哈
由于我这里只简单选择了以下三项：
- Choose Vue version；
- Babel；
- Router；
所以之后进一步的详细配置就只有两项：
- 选择Vue语法版本（2.x / 3.x（Preview））；
- 选择路由模式（history mode / hash mode）；
简单选择2.x和hash mode，点击创建项目！
2.4 是否保存当前配置为预设
最后还是一样，会问你要不要保存当前配置为预设。这就看你们自己了。
2.5 等待项目的创建完成
之后就会提示：在创建项目… 等待接即可。
回到vscode中，他也会提示你项目正在创建。
创建完成后会默认进入该项目的管理界面 —— 项目仪表盘。就像下图的欢迎页。
三. 管理项目
使用Vue UI创建的项目，会列出在Vue UI的首页。返回首页的操作如下图所示：
这样就看到了我们刚才创建的项目。点击也就又回到了仪表盘页面。
后续重点来看对具体项目的管理。
3.1 插件管理
进入插件页会列出你当前项目已安装的所有插件信息。
而且，这与package.json中devDependencies字段内容一致（以@vue/cli-plugin-开头的代表的是插件）：
此外Vue UI中，对插件的管理还包括：搜索，添加，更新等等。
比如我们来演示一个插件的新增 —— axios：
3.2 依赖管理
同样对于项目依赖也有列出，也支持相应的增删改，更新等操作。
其中运行依赖对应package.json中的dependencies字段内容：
之前的插件信息和此处的开发依赖同属于package.json中的devDependencies字段：
3.3 项目配置
有关项目本身的一些基础设置可以在这里配置。比如公共路径：默认是绝对路径 / ；我们要想使用相对路径就可以给他置空，或者改成. /
还有输出目录的设置，默认是dist文件夹（熟悉wabpack打包的同学应该清楚），我们可以给他改成任意命名。
3.4 任务（serve / build / inspect）
Vue UI对于项目的编译运行，打包等操作也支持可视化操作。具体对应vue-cli-service中的三种命令（serve / build / inspect）：
（有关三种命令的讲解可以回顾上一篇：传送门 🚪）
3.4.1 serve —— 编译并运行
这一步操作相当于执行命令：
npm run serve
仪表盘中会统计本次编译的各种信息，这里同样也有输出控制台，可以查看编译的细节和结果。
3.4.2 build —— 编译并打包
打包操作本质上也和命令一样：
npm run build
打包结果如下：
在项目目录中可以看到生成的dist文件夹：
3.4.3 inspect —— 查看webpack配置
这里对于webpack配置的查看也很方便，不再需要我们使用命令把webpack配置另存到一个文件中查看。这里直接点击运行即可。
写在最后
用完这一圈Vue UI下来，感觉比命令行直观太多了。不过对于程序猿来说，虽然Vue UI是很方便，可是耐不住命令行的魔力呀~
不过对于后端攻城狮来说，不熟悉前端开发，使用Vue UI也是一个很不错的选择。
每一个不曾起舞的日子,都是对生命的辜负!
—— 尼采
828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
