vue/cli4 创建vue项目选项详解

1.查看 vue 版本：
项目中,找到package.json文件夹 找"dependencies"中的vue ；
若无项目，在cmd中输入 where vue，cd到vue目录下输入 npm list vue ，即可看到。
2.查看 vue-cli脚手架 版本：
vue -V （很多人会把这个认为是查看vue版本）
3.安装最新版本 vue 和 cli ：
npm install vue -g (-g为全局安装，存到全局仓库)
npm install @vue/cli -g (cli3以后命名由vue-cli改为@vue/cli)
4.安装指定版本 vue 和 cli ：
npm install vue@3.x -g
npm install @vue/cli@3.x -g （npm install vue-cli@2.x -g ）
5.vue和vue/cli版本不匹配时，创建项目时仔细看错误提示，会显示需要什么版本的vue

一、vue-cli@2.x

vue init webpack demo

cd demo
npm install // 安装基础模块
npm run dev // 运行

二、vue-cli@3.x

vue create demo


cd demo
npm install
npm run serve

三、vue-cli@4.x

vue create demo

作为学习记录，这里全部选择
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel  //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
 (*) TypeScript // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
 (*) Progressive Web App (PWA) Support // 渐进式Web应用程序
 (*) Router	// 路由
 (*) Vuex	// 状态管理（全局变量管理）
 (*) CSS Pre-processors // css预处理器 ：sass 和 less 使用较多
 (*) Linter / Formatter // 代码风格检查和格式化 ： ESLint + Prettier 使用较多，
 (*) Unit Testing // 单元测试
>(*) E2E Testing // e2e（end to end） 测试                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

后面的一些选项：

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview) 
? Use class-style component syntax? (Y/n) y   // 是否使用babel做转义
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y // 是否使用class风格的组件语法
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 是否使用history模式（服务端需要配置路由映射），还是默认hash（地址栏有#符号）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): //选择css预处理的模式
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus 
? Pick a linter / formatter config: // 选择语法检测规范
  ESLint with error prevention only // 只进行报错提醒 
  ESLint + Airbnb config // 不严谨模式
  ESLint + Standard config // 正常模式
> ESLint + Prettier // 严格模式 使用较多
  TSLint (deprecated) // typescript格式验证工具
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 使用较多 建议保存即检测
 ( ) Lint and fix on commit  // 提交才检测，此时可能问题已多，事倍功半   
? Pick a unit testing solution: // 各有各自的长处与短处，开发者需要根据当前项目的需求选择
  Mocha + Chai // Mocha是一个能够运行在Node和浏览器中的多功能的JavaScript测试框架，它让异步测试简单且有趣。Mocha连续地运行测试，并给出灵活而精确的报告，同时能够将错误精确地映射到测试用例上。chai 是一个强大的断言库
> Jest // 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能，配置较简单
? Pick an E2E testing solution:
  Cypress (Chrome only) // 新一代ui测试框架，类似于selnium，它基于node js，支持webpack构建。
  Nightwatch (WebDriver-based) // 基于Node.js的端到端(e2e)测试方案，使用W3C WebDriver API，将Web应用测试自动化。它提供了简单的语法，支持使用JavaScript和CSS选择器，来编写运行在Selenium服务器上的端到端测试
> WebdriverIO (WebDriver/DevTools based)  // WebDriverIO 是基于一个基于node的网页自动化测试框架，它封装了 Selenium WebDriver API，可拓展性非常高。相比较原生的Selenium 而言，WebDriverIO 的代码非常的简单易懂，api和方法与jquery相似，非常方便前端上手。同时WebDriverIO 也支持mobile端的测试。 
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) // 选择配置信息存放位置
> In dedicated config files // 独立文件放置，项目会有单独的几件文件
  In package.json // 统一放置放置
? Save this as a preset for future projects? (y/N) y // 是否保存此配置，方便在以后创建项目中选择使用以上配置
------------------------------------------end----------------------------------------------------

cd demo
npm install
npm run serve

可以看出，cli2、cli3可以搭建vue2项目；cli4可以搭建vue2和vue3项目，创建项目时都会有相同的选项：
ESLint 代码规范，unit tests单元测试，e2e tests测试；后面的版本加了项目router路由¹、Vuex状态管理²、css预编译器³（之前cli2中这些都要自己配置）以及babel⁴、ts⁵和PWA⁶支持。

这些模块均可以日后按需自己安装

---

1. 必备，用于更新组件（页面） ↩︎

2. 全局变量管理，vue3中可能被某个新特性取代 ↩︎

3. 预编译器指的是能将less、Sass/SCSS等文件编译成浏览器能识别的css格式，他们拥有更强大的语法和功能 ↩︎

4. javascript在不断的发展，各种新的标准和提案层出不穷；由于浏览器的多样性，无法广泛普及，babel可以让你提前使用这些语言特性，他是一种用途很多的javascript编译器，他把最新版的javascript编译成当下可以执行的版本。简言之，利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言（所以必选）。 ↩︎

5. TypeScript的一个设计亮点就是它并没有抛弃JavaScript的语法另起炉灶，而是做成了JavaScript的超集（这个功劳应该记在Anders上），这样任何合法的JavaScript的语句在TypeScript下都是合法的，也就是说学习成本很低，引入ts模块后即刻在vue框架中使用ts；TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。 ↩︎

6. PWA不是API或技术，但它是一种Web开发方法，它使用已有的工具和技术组合来创建有针对性的理想用户体验。Progressive Web App(PWA) ↩︎