使用 vue ui 图形化界面创建vue项目

1. 打开一个要创建项目的文件夹，选中文件路径然后输入‘cmd’，回车，打开命令行界面
   

2. 然后直接输入命令 vue ui ,等待加载，成功后会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程；
   
   

3. 选择创建，在此可再选择项目所在目录，然后在下方选择在此创建新项目；
   

4. 然后进入详情页，给项目命名、选择包管理器。这里选择 npm，接着点下一步；
   

5. 进入预设页面，选择 手动 ，便可以手动选择安装哪些依赖项，或使用其他已经预设好的依赖项组合。这里选择 手动 ，然后点下一步；

6. 进入功能页面，选择开发需要的功能。

(0.Choose Vue Version：选择vue版本
(1. Babel：转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
(2. TypeScript：支持使用 TypeScript 书写源码
(3. Progressive Web App (PWA) Support： 支持渐进式网页应用程序
(4. Router：支持 v-router（路由管理器）；
(5. Vuex：支持 vuex（状态管理模式（构建一个中大型单页应用时））；
(6. CSS Pre-processors： css预处理（如：less、sass）
(7. Linter / Formatter ： 代码风格检查和格式化（如：ESlint）
(8. Unit Testing： 单元测试（unit tests）
(9. E2E Testing： E2E（End To End）即端对端测试

然后点击下一步；

7. 然后进入配置页面，对上一页所选的功能进行配置；

• router history模式：直观表现就是去除了hash模式中url路径中的#。建议关闭。
• 选择CSS预处理：node-sass是自动编译实时的，dart-sass需要保存后才会生效。
  
• 选择 ESLint 代码校验规则
  
• 选择什么时候进行代码校验，Lint on save 保存就检查
  
• 选择单元测试
  Mocha + Chai： mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
  Jest： 安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
  

8. 配置好后点击创建 创建项目，此时可以选择是否存入预设（是：取名保存，否：不记录本次配置）
   
   然后等待创建

9. 创建成功后，点击进入依赖面板中，

点击右上角安装依赖，搜索所需要的的依赖包，例如 搜索 ·axios，然后选中安装；

10. 好，至此vue项目创建完毕，接下来点开任务面板，在serve面板中启动项目。
    或者在VSCode中运行npm run serve;
    

参考文章：

vue-cli3.0 开发环境构建
vue cli3.0快速搭建项目详解
vue-cli3 创建项目与初始配置