体验vue UI，图形可视化化管理vue项目，告别webpack配置

vue-cli 3.0 版本为我们提供了集 创建、管理、分析 为一体的可视化界面vue UI
打开我们的任意一个vue项目，命令行终端输入vue ui

片刻等待以后，浏览器自动跳转到http://localhost:8000/project/select，可以看到如下的界面
Vue项目管理器提供了三个功能：

• 管理项目

• 创建项目

• 导入一个已经存在的项目
  
  然后我们点击导入，然后再导入到这个文件夹，如图所示
  
  进入到可视化项目界面，我们可以从左边工作区来管理项目
  
  查看项目插件（这里大多是全局的插件）
  
  查看依赖
  
  相关配置
  
  这里的配置页，基本上是以前的config文件夹的相关内容。
  baseURL：应用的根目录
  output directory：build 生成的目录
  Assets directory：静态资源的目录
  Enable runtime compiler：允许在组件中使用 template ，但是会因此让app多10kb负载。
  Enable Production Source Map：在生产环境使用 js Source Map 便于调试，但是会影响build的速度。
  Parallel compilation：多线程并行编译Babel或者Typescript。
  Enable CSS Modules：默认只有以 *.module.[ext] 结尾的文件才会被视为CSS模块。开启此项，允许你在文件名中删除 module 并将所有的样式文件( css|scss|sass|less|styl(us)? )视为CSS模块 。
  Extract CSS：是否将CSS导出为一个CSS文件，而不是写在js中内联，并动态注入。在构建为Web组件时，默认情况下也会禁用此选项(样式内联并注入shadowRoot), 构建库时，您也可以将其设置为false，以避免用户自己导入CSS。
  Enable CSS Source Maps：为CSS启用source map，会影响构建性能。
  点击更多，可以查看相关的帮助和详情。

  任务