概述
Vue CLI 3.0 更新后,提供了一套全新的可视化Vue项目管理器 —— Vue UI。所以要想使用它,你的 Vue CL I版本必须要在v3.0以上。
一、启动Vue UI
1.1 环境准备
1.1.1 安装node.js
访问官网(外网下载速度较慢)或 http://nodejs.cn/download/ 获取安装包文件,再安装时全部选择默认,否则可能需要手动配置。安装完成后,在命令行输入以下命令,查看版本号确认安装成功。
node -v
npm -v
因国内使用npm很慢,所以推荐使用淘宝npm镜像cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.1.2 安装vue-cli
# 安装vue-cli3
npm install -g @vue/cli
# 或者
cnpm install -g @vue/cli
# 查看版本号确认安装成功。注意:V必须为大写
vue -V
1.2 启动 Vue UI
Vue UI 的启动命令很简单,选择好要创建项目的存放目录,接着终端执行以下命令后,它会自动跳转到你的默认浏览器并打开8000端口,你会看到:
vue ui
这就是Vue UI的界面,在这里我们可以实现对Vue项目的全可视化操作,接下来我们就一一演示它的功能。
二、使用 Vue UI 创建项目
2.1 创建项目文件
点击创建,然后选择要建项目放置的位置,如下图所示:
如果在该目录下存在Vue项目,可以看到之前创建的项目。这里我们需要继续点击下方的 + 在此创建新项目 绿色按钮,如下图所示:
在这里,可以填写项目名称,个人建议去掉初始化git仓库。不过这里可选择的配置项会更多,比如包管理器(npm),需不需要新手引导的文件,即是否创建空白项目等等,这都是使用命令行创建所不能带给我们的。
2.2 选择配置方案
我们之前命令行创建的话,只会有这里的前三个选项:
Vue UI中还给我们提供了第四种预设:远程Git仓库拉取。 不过,我们仍然要选择手动配置,如下图所示。
2.3 自定义的可选配置项
这一步在选择项目所需的配置项时,就很直观了。页面内也有很多提示和查看详情的入口,相较于之前命令行的方式,方便简单多了。我这里只简单选择了Choose Vue version、Babel、Router等三项。
进一步的详细配置就只有两项:
- 选择Vue语法版本(2.x / 3.x(Preview));
- 选择路由模式(history mode / hash mode);
2.4 是否保存当前配置为预设
最后还是一样,会问你要不要保存当前配置为预设,这就看你们自己了。
2.5 等待项目的创建完成
之后就会提示:在创建项目… 等待接即可。
创建完成后会默认进入该项目的管理界面 —— 项目仪表盘,就像下图的欢迎页。
三、使用 Vue UI 管理项目
使用Vue UI创建的项目,会列出在Vue UI的首页,返回首页的操作如下图所示:
这样就看到了我们刚才创建的项目,点击也就又回到了仪表盘页面。
接下来看如何使用可视化的Vue项目管理器(Vue UI)来对具体项目的管理。
3.1 插件管理
进入插件页会列出你当前项目已安装的所有插件信息。
而且,这与package.json中devDependencies字段内容一致(以@vue/cli-plugin-开头的代表的是插件):
此外Vue UI中,对插件的管理还包括:搜索,添加,更新等等。
比如我们来演示一个插件的新增 —— axios:
3.2 依赖管理
同样对于项目依赖也有列出,也支持相应的增删改,更新等操作。
其中运行依赖对应package.json中的dependencies字段内容:
之前的插件信息和此处的开发依赖同属于package.json中的devDependencies字段:
3.3 项目配置
有关项目本身的一些基础设置可以在这里配置。比如公共路径,默认是绝对路径 /
,我们要想使用相对路径就可以给他置空,或者改成 ./
。还有输出目录的设置,默认是dist文件夹,我们可以给他改成任意命名。
3.4 任务
Vue U I对于项目的编译运行,打包等操作也支持可视化操作,具体对应vue-cli-service中的三种命令(serve、build、inspect),如下图所示:
serve — 编译并运行
这一步操作相当于执行命令:
npm run serve
仪表盘中会统计本次编译的各种信息,这里同样也有输出控制台,可以查看编译的细节和结果。
build — 编译并打包
打包操作本质上也和命令一样:
npm run build
打包结果如下:
在项目目录中可以看到生成的dist文件夹:
inspect — 查看webpack配置
这里对于webpack配置的查看也很方便,不再需要我们使用命令把webpack配置另存到一个文件中查看,这里直接点击运行即可。
结语
结语
把今天最好的表现当作明天最新的起点…….~
投身于天地这熔炉,一个人可以被毁灭,但绝不会被打败!一旦决定了心中所想,便绝无动摇。迈向光明之路,注定荆棘丛生,但从不妨碍我继续向前。自己选择的路,即使再荒谬、再艰难,跪着也要走下去!放弃,曾令人想要逃离,但绝境重生方为宿命。若结果并非所愿,那就在尘埃落定前奋力一搏!