前言

用了vue好久，从在页面中引用Vue脚本到使用vue-cli脚手架进行配置自己的单页面应用。vue-cli使得我能够快速的搭建一套标准的文件框架以及默认的配置进行页面的初始化，从而不用重复的设置某些细小的地方。新的vue-cli3其中自带一个GUI的图形用户界面,可以为我们节省大量时间，并且使用 CLI 构建和生成的 Vue 应用程序时让我们清楚地了解我们实际在做什么。

注意： UI工具目前一直处于测试版，并且可能会发生很多变化。

先决条件

首先要熟悉Javascript和对Vue有实际的应用和理解
安装node.js
对命令行操作有一定的了解

安装Vue-cli3

使用npm全局中安装vue-cli3的构建工具。

1	npm i -g @vue/cli

安装完成后，在终端上输入 vue 你应该会看到以下内容。

F:\blog\hexo-next-blog>vue
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  upgrade [semverLevel]                      upgrade vue cli service / plugins (default semverLevel: minor)

  Run vue <command> --help for detailed usage of given command.

这就代表vue-cli3的脚手架安装完成了。

但是，假如说你还要使用之前vue-cli 2.x的脚手架的话，可以安装兼容包。

1	npm install -g @vue/cli-init

安装完成之后还可以使用之前的vue init命令创建项目。

1	vue init webpack my_project

Vue GUI 用户图形界面

在命令行中输入 vue ui,这个时候电脑默认浏览器会自动弹出页面(假如没有弹出页面，可以手动输入命令行最后提示的本机ip+端口号，默认是http://localhost:8000)

界面以及操作

假如说之前没有使用过vue ui的话，默认显示的页面是下面的样子：

vue-ui 初始页面

图片有三个明显的导航

项目(Projects) – 将列出当前目录的项目，或者您使用此工具生成的项目,将像是图片上显示的这样
创建(Create) – 将允许您创建新的 Vue 项目
导入(Import) – 允许您从目录或远程 github 仓库导入项目

接下来试着创建一个项目

单击 创建(Create) 选项卡，然后单击在此处创建新项目(Create a new project here) 按钮。

vue-ui 初始页面

会出现一个创建新项目表单，让我们填写项目名称 test-vue 。

vue-ui 初始页面

初始包管理器选择npm包管理器，选项中还可以选择yarn

其他的选项可以按照个人需要进行操作

点击下一步进行选择预设或者是选择默认配置或者手动配置或者是可以从github上拉取相关的配置

vue-ui 初始页面

选择手动之后，会进入如下页面

vue-ui 初始页面

进入到功能(Features) 页面，以便选择所需的插件和配置。可以根据个人需要进行配置相关的默认功能。向下滚动以查看所有配置。

所有选项都有一个 查看详情(More Info) 链接，该链接将在新选项卡中打开，包含有关要添加的插件/功能的文档。