使用Vue ui （可视化）创建Vue项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用Vue ui （可视化）创建Vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

首先打开电脑硬盘上随便一个文件夹
我这里是用E盘做的演示
使用Vue ui （可视化）创建Vue项目
打开E盘后，输入cmd（我这里是E盘根目录，如果不想用根目录可以新建文件夹）

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

在终端上输入 vue ui

如果敲了回车不生效
使用Vue ui （可视化）创建Vue项目
不要着急我来教你解决
先Vue -h检查一下

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

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

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

操作完成以后再一次的vue -h检查一下，此时你会发现Commands中多了一个ui的相关信息
使用Vue ui （可视化）创建Vue项目
接下来回到我们创建项目的那个控制面板中输入 vue ui命令

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

点击创建

使用Vue ui （可视化）创建Vue项目
这就是创建项目的面板（带领大家认识一下）

项目文件夹：说白了就是你项目叫什么名字，这里建议大家都起全英文的名字
紧挨着的就是项目的存放路径
包管理器：不用管，默认就好
更多选项：一般也不用管
覆盖提交信息（选填）：我们在这里填一下 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：一般不用管（或者两个都选择，看个人情况吧）
点击创建项目

会弹出一个保存为新的预设（给他起个名字就行）点击保存预设并创建项目，等待一会就可以了。
使用Vue ui （可视化）创建Vue项目
当项目创建成功并提示后，打开我们创建项目的文件夹，看一下
E盘根目录，确实有了我们创建的项目

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

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