vue-cli快速搭建项目配置

环境准备

在搭建新的vue-cli项目之前，要先安装node，npm，vue-cli

创建新项目

1. 进入项目将要存放的目录
2. 创建项目

 vue create 项目名称

选择手动配置/默认配置

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)       //默认配置
  Manually select features 		//手动配置

手动配置项

1. 选择需要的包

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection //space选中，a全选，i反选)
❯◉ Babel         //转码器，可将ES6转为ES5
 ◯ TypeScript    //TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
 ◯ Progressive Web App (PWA) Support     // 渐进式Web应用程序
 ◉ Router    //路由
 ◉ Vuex    //状态管理
 ◉ CSS Pre-processors   //CSS预处理器如less，sass
 ◉ Linter / Formatter   // 代码风格检查和格式化（如：ESlint）
 ◉ Unit Testing		//单元测试
 ◉ E2E Testing		//end to end测试

2. 是否使用history router

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。
我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。选yes的话需要服务器那边再进行设置。

3. 选择预处理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus 

node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。

4. 选择代码检测工具

 ? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier   //使用较多

5. 什么时候进行代码规则检测

 ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save		//保存即检测
 ◯ Lint and fix on commit		//fix和commit时检测  

6. 选择单元测试

? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai   //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
  Jest   //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

7. 选择如何存放配置

?  Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files   //独立文件放置
  In package.json 		//存放在package.json中

8. 是否保存当前配置

? Save this as a preset for future projects? Yes
? Save preset as: study

创建成功

added 1453 packages from 1378 contributors in 117.97s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 83 packages from 70 contributors in 11.765s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project hello-kitty2.
👉  Get started with the following commands:

根据提示运行进入项目文件夹运行即可

 $ cd hello-kitty2
 $ npm run serve

全文参考及引用于https://www.cnblogs.com/sese/p/11712275.html