前言

在vite出来前，一般使用vue-cli工具创建vue项目。当我们使用vue-cli创建项目时，除了命令行创建项目还可以使用自带的vueui可视化创建项目，并且管理创建的项目，本节我们就来看下这个可视化管理器。

创建

vueui使用起来很简单，在创建新项目的文件夹中打开cmd输入vue ui运行，过一会在浏览器页面就能加载出vue ui的界面。

点击创建，就能管理我们的项目了，如果文件夹之前有vue项目，就会在这里展示出来，点击新建项目就能创建新项目，创建步骤就是选择我们想要的语音，整个过程都是可视化的要比命令行看起来生动多了。下面我们用vue ui创建一个新项目。

• 首先点击创建新项目，就会出现项目详情弹窗，选择想要的相关信息，点击下一步。
• 预设插件，这里我们可以选择vue版本以及插件配置，除了自带的我们还可以从git拉取或者手动配置。选好后点击创建项目。
• 创建完成来到项目仪表盘，在这里我们查看插件、依赖、配置等信息。
• 点击左侧任务，选中运行serve，就会自动运行，并且将运行信息展示出来，运行成功点击启动，我们就能看到运行起来的项目。 除了自带的新建功能，我们还可以用导入菜单导入项目。点击导入选中项目目录并且进入到项目文件夹中点击导入即可，一定要进入到项目当中。 以上就是vue ui新建项目的过程，比起命令行更加的方便快捷。

其他功能

除了创建功能，项目中的依赖，配置都能够在ui中显示出来，下面我们来简单了解下各自的使用。

• 配置界面，配置界面展示了插件的配置详情，比如eslint，我们能够在该界面选中eslint具体的配置详情。如果是自定义插件，想要在此界面展示出来，我们就要使用vue ui的配置文件。在根目录下创建ui.js文件，导出一个函数，以api为参数，就能修改界面的相关配置。

   module.exports = api => {}

自定义插件配置项通过api.describeConfig添加：

  //id:唯一标识。    
  //name:名称。  
  //description:配置项描述。
  //link:具体的链接。
   //module.exports = api => {
  api.describeConfig({
    id:'123',
    name:'myConfig',
    description: '这是我的配置项',
    link: 'https://123'
  })
}

• 任务界面，项目的运行、打包等任务也能在vue ui的任务界面上显示，具体的任务列表是根据scripts中的命令行获取的。我们也可以通过api.describeTask方法去自定义任务，具体用法跟配置项一样，只是一些参数的修改，命令的参数是match。
• 依赖界面，项目中有关依赖的展示，我们可以管理项目中相关的依赖，比如依赖的更新删除等。 vue ui有着自己的配置文件，上面介绍了两个方法，在界面添加配置项与任务项目。全部的api我们可以在官网中查看学习，以此来增加ui展示效果，丰富vue ui的功能。

总结

vue ui是一个可视化管理vue项目的工具，能够将整个过程都可视化出来，特别是自带的任务管理，还能将数据统计出来。如果我们后续创建新的vue项目，可以尝试使用vue ui，感受下可视化创建项目。