使用Vue ui （可视化）创建Vue项目

使用Vue ui （可视化）创建Vue项目

首先打开电脑硬盘上随便一个文件夹
我这里是用E盘做的演示

打开E盘后，输入cmd（我这里是E盘根目录，如果不想用根目录可以新建文件夹）

cmd的位置，当然要是新建文件夹后，cmd也是在这里输入
输入好cmd以后会弹出一个终端

在终端上输入 vue ui

如果敲了回车不生效

不要着急我来教你解决
先Vue -h检查一下

此时Commands中少了一个ui的相关信息
在控制面板中运行一下两行命令：

npm uninstall vue-cli -g //卸载老版本

npm install @vue/cli -g //安装新版本

操作完成以后再一次的vue -h检查一下，此时你会发现Commands中多了一个ui的相关信息

接下来回到我们创建项目的那个控制面板中输入 vue ui命令

成功了，我们成功解决vue ui失效
接下来会自动弹出一个页面

点击创建

这就是创建项目的面板（带领大家认识一下）

1. 项目文件夹：说白了就是你项目叫什么名字，这里建议大家都起全英文的名字
2. 紧挨着的就是项目的存放路径
3. 包管理器：不用管，默认就好
4. 更多选项：一般也不用管
5. 覆盖提交信息（选填）：我们在这里填一下 init project
   以下是我填完的（仅供参考）填完以后，点击下一步
   
   会进入到预设这个面板
   
   选择一套预设（我点击的是手动添加预设，都可以点击，为了详细教学我选择手动添加）点击下一步
   
   会进入到功能这个面板
   
   简单理解为就是你在项目中用到的东西
   
   在这里我选择了三个（如果项目中用到VueX就选上，没用到可以暂时不选）
   Router：Vue中的路由
   Linter/Formatter：可以让你的代码写的更严谨一些，通常是用来做报错提醒的
   使用配置文件：将插件的配置保存在各自的配置文件中
   点击下一步
   会进入到配置面板
   
   Choose a version of Vue.js that you want to start the project with：
   你想用Vue的那个版本，这个就看大家的需求了（在这里我选择的是Vue2）
   Use history mode for router? ：就默认让它关闭就可以
   Pick a linter / formatter config:：代码的书写风格（我们建议选择第三个。 ESLint + Standard config）
   Pick additional lint features： 一般不用管（或者两个都选择，看个人情况吧）
   点击创建项目
   

会弹出一个保存为新的预设（给他起个名字就行）点击保存预设并创建项目，等待一会就可以了。

当项目创建成功并提示后，打开我们创建项目的文件夹，看一下
E盘根目录，确实有了我们创建的项目

再打开可视化面板（以下就是项目创建成功后的可视化面板）

可以在插件，依赖中下载你想用到的，就可以了

运行项目

第四步：启动app，就可以看到你新建的项目页面

以上就是用Vue ui（可视化）创建项目的大体步骤，欢迎各位大佬学习指导！