Vue UI - 可视化的Vue项目管理器

概述

  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配置另存到一个文件中查看，这里直接点击运行即可。

结语

结语

把今天最好的表现当作明天最新的起点……．～

  投身于天地这熔炉，一个人可以被毁灭，但绝不会被打败！一旦决定了心中所想，便绝无动摇。迈向光明之路，注定荆棘丛生，但从不妨碍我继续向前。自己选择的路，即使再荒谬、再艰难，跪着也要走下去！放弃，曾令人想要逃离，但绝境重生方为宿命。若结果并非所愿，那就在尘埃落定前奋力一搏！