关于Vue ui的可视化界面进行Vue项目的创建

对于初学Vue的小伙伴们很多肯定是直接使用npm的命令进行安装脚手架的安装，但是除了是用npm进行安装以外，我们还可以是用Vue提供的GUI方法vue ui来进行项目的构建以及安装。

Vue CLI

️ Vue.js 开发的标准工具

• 首先我们要全局的进行装Vue的脚手架到我们的电脑内。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
//在这里，我们安装的会默认安装最新版本的4.0+的Cli版本
//如果我们需要的是3.0+的版本则需要使用
npm install -g @vue/cli@3
//或者2.0+的版本的话则需要使用
npm install -g vue-cli

• 安装完成之后，我们就可以使用Vue的内置命令进行项目的安装了，一个是使用命令的方式，另一种就是今天我们要说的GUI的方式进行安装了。

vue create my-project
# OR
vue ui

vue ui

• 在输入vue ui后，会出现如图所示的标识，显示正在启动GUI 然后显示服务启动在8000端口上，这个时候浏览器会自动弹出并打开页面。

Vue项目管理器

• 然后我们如果在当前目录中有项目的话，它也会自动识别出来，如果我们没有- 项目的时候，可以在第二栏中选择创建选项。

  
  
  创建项目

• 选择在此处创建项目的话，就会在当前你选择的文件夹下创建项目目录。（这里我选择在桌面创建了。然后选择完路径后，选择在此处创建新项目。）

  
  
  创建新项目

• 首先则是输入项目名称，然后选择包管理器。包管理器方面有npm、yarn、以及pnpm三项。我们也可以选择初始化git仓库来进行初始信息的提交。

  
  
  预设项目配置

• 紧接着就是我们上图所示的样子，它需要我们选择一些预设配置，默认勾选的是只有babel以及eslint的项目依赖。我们也可以选择手动进行项目的配置。

  
  
  功能

• 选择手动配置然后下一步后我们就可以看到如上图所示的功能推荐，有Babel、TS、PWA、Router、Vuex、CSS Pre-processors、Eslint、Unit Testing、E2E Testing等内容。我们可以根据自己的需求进行勾选。这里我只是勾选了Vue-Router以及Vuex、Css Pre-processors。

  
  
  配置

• 接下来就进入到最后一步配置了。我们这个页面是选择要配置的路由模式。是否使用history的路由模式（该模式下需要服务器端的支持，如果没有的话，在进行打包后，会出现页面内容无法加载。）然后就是选择CSS的类型了。分别有dart-sass以及node-sass、Less、Stylus几种选项，而第三项则是Eslint的检查方式。（根据自己需求进行选择）下方会有两个滑块。是选择是否保存该方案。

  
  
  保存

• 接着就会弹出模态框，问你是否需要保存预设内容，如果保存以后，下次创建项目就可以直接选择保存的预设了还是蛮方便的。

  
  
  cmd命令行
  
  

  接下来命令行那边就会自动的进行项目的创建以及依赖的安装了。我们只需要稍等几分钟就可以了。（但是不知道具体什么情况，我使用windows电脑命令行总是会时不时卡住，所以可能是mac大法好吧。）

  
  
  YES！YES！YES

• 接着我们的项目就创建完成啦。

  
  
  仪表盘

• 然后我们创建项目的那个页面，就变成了新模样，在这里我们可以进行端口的终止，以及新项目的指引。在插件以及依赖处可以安装对应的插件以及依赖。

  
  
  插件安装
• 这样我们就再也不用担心我们命令行敲错或者不知道如何输入命令行啦！（但是，友情提示，虽然GUI可以方便我们的操作，但是还是建议入门的小伙伴在学会使用GUI页面的同时也要掌握代码的创建方法吖。撒花完结！）