vue UI 基于图形化界面快速创建vue项目

vue UI 基于图形化界面快速创建vue项目

Vue CLI 3新版本发布后，我们现在快速创建一个vue项目的话，更加简单了，Vue UI。一个可视化图形界面方便你去创建、更新和管理项目的方方面面。

今天，我会跟你一一介绍Vue UI的beta版本中可用的功能。

1 首先我们可以先检查下自己的vueCli版本是否在3.0以上，如果没有的话我们可以升级或者重新安装都可以，全局安装，只安装一次就行，检查版本的形式如下：

2 安装的方式如下，可以根据自己的需要 选择以下的任何一种方式都可以

npm install -g @vue/cli
# OR
yarn global add @vue/cli

3 接着我们就可以在我们的终端中创建vue项目了

在打开的终端中输入vue ui

命令执行完之后，会自动给我们打开一个界面，如下：

在打开的这个面板中，我们可以设置项目的存放位置，默认的存放位置是我们的c盘，可以自己选择，选择完之后，点击在此创建项目的按钮，进入到下面这个页面：

在这个页面，我们只需要填写下面这两项就行，其余的按照默认的就可以了

接着打开的是下面的这个页面

这个界面中，如果我们之前已经生成保存的有一个预设，比如我的这个my-preset01这个预设，我们可以直接选择,因为这个预设已经把我们之前需要安装的依赖等配置好，可以直接使用，当然我们也可以选择默认配置或者手动配置项目。

比如我们选择的是手动配置， 点击下一步：界面如下

在功能这个面板中，我们可以根据自己的需要安装一些插件，如果需要安装某个插件，只需要将该插件后面的那个开关打开就行

选完之后，点击下一步，界面如下：

配置这个界面，我们可以选择项目中路由的形式，建议使用hash模式比较好些，下面的这个配置是让我们选在什么时候进行代码格式检查，选默认的即可，即保存的时候，右边的这个下拉框，我们选择标准的模板就可以了。选择完之后，我们点击创建项目

来到的是这个界面

我们可以将我们本次的配置保存成一个新的预设，等下次我们创建项目的时候可以直接使用，也可以不保存，直接创建项目

接下来我们等待下就可以了，因为这个会自动帮我们下载我们选择或者配置的那些插件或者依赖

下载完成后，浏览器会自动帮我们打开一个项目控制面板，在这我们可以根据需要自定义配置就行

选择左侧的任务选项，然后打开任务面板，点击serve会出现右侧对应的区域，接着点击运行，我们的vue项目就启动了

编译成功之后，点击启动app按钮，就能看到项目的页面了

以上就是利用图形化界面创建vue项目的方式，我们在创建好的项目中，可以根据项目需求安装各种依赖或者插件即可。