VUE3.0学习系列随笔（三）：VUE-UI管理界面使用之运行和打包

VUE3.0学习系列随笔（三）：VUE-UI管理界面使用之运行和打包

vue-ui是VUE3.0中新增的项目管理可视化工具，在这个工具中，我们可以管理当前项目的启动、编译和打包，以及查看项目的运行状态。

1、开启VUE3.0 UI管理界面

进入VUE3.0项目根目录，运行UI界面开启命令

vue ui

运行成功界面：

运行成功之后，会自动打开浏览器，j默认端口为：8000，进入管理界面，也可以自己访问图中地址进入。

2、仪表盘界面（首页）

（1）VUE3.0 UI首页仪表盘界面如下图，各个模块的功能已在图中标注

（2）自定义仪表盘界面，可以点击右上角“自定义”按钮进入自主定义首页选项栏

注意：这个界面首次进入会显示中文，关闭之后，输入地址进入会显示英文，如果还想显示中文，可以管理cmd窗口，重新运行启动命令即可。

2、任务界面

因为项目最常用的功能是编译和运行，因此最先介绍任务界面用法，任务界面包含：项目编译启动、代码检查、项目打包等功能，任务主界面如图中标注所示

2-1、serve界面（项目启动界面）

（1）界面展示，主要包括运行、参数配置，输出分析和仪表盘等等功能

（2）配置运行参数，按照图中配置，并保存参数

（3）点击运行按钮，运行项目，项目运行成功如下图所示，每个模块的显示介绍如图中标注。

点击启动App，则会在新的标签页显示项目首页
（4）切换到输出栏，会显示项目的编译过程和结果

如果要停止项目，点击停止按钮。

2-2、build界面（项目打包界面）

（1）界面展示，界面布局和运行界面类似，包含运行、参数配置等等功能

（2）配置打包参数

（3）点击运行，开始项目打包

编译结果显示

（4）打包完成，进入配置的文件夹中查看打包结果

2-3、lint界面（代码规范检查界面）

（1）界面展示，主要包含运行、参数配置等功能

（2）参数配置，默认在检查时就修复错误，在配置中可以更改

（3）点击运行，即开始代码检查

2-4、webpack界面

略