vue-cli3.0项目搭建

每次搭建项目都需要去百度教程，这次自己做一个笔记，方便以后使用

1.卸载之前版本的vue-cli

npm uninstall -g vue-cli

2.安装vue/cli3.0

npm i @vue/cli -g

3.查看版本

 vue -V

4.创建项目

vue create demo

5.配置模板

    Vue CLI v3.5.1
    ? Please pick a preset:
      vue-template (vue-router, vuex, dart-sass, babel, eslint)  //创建好的模板
      default (babel, eslint)
      //默认配置只有babel和eslint其他的都要自己另外再配置，所以一般情况下我们都会选择第二项手动配置。
    > Manually select features	 //手动配置

6.选择配置

 	Vue CLI v3.5.1
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project:(Press <space> to select, <a> to toggle all, <i> to invert selection)
    // 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
     (*) Babel            						 //支持babel
     (*) TypeScript			                     // 支持使用 TypeScript 书写源码
     (*) Progressive Web App (PWA) Support       // PWA 支持
     (*) Router									 // 支持 vue-router
     (*) Vuex									 // 支持 vuex
     (*) CSS Pre-processors						 // 支持 CSS 预处理器
     (*) Linter / Formatter						 // 支持代码风格检查和格式化
     (*) Unit Testing							 // 支持单元测试	
     ( ) E2E Testing							 // 支持端到端测试

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
这里需要选择路由模式，yes 是 history 模式，no 是 hash 模式，实际项目通常采用hash模式。

  Sass/SCSS (with dart-sass)  	//推荐使用dart-sass	
  //需要保存后才会生效，sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现
  Sass/SCSS (with node-sass)		//自动编译实时的
  Less
  Stylus   //不支持原生 CSS 写法

  ESLint with error prevention only   //eslint仅具有错误预防功能
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier   //我选择的是这种

>(*) Lint on save            	  
 // 保存就检测，建议选保存就检测，等到commit的时候，问题可能都已经积累很多了
 ( ) Lint and fix on commit       // fix和commit时候检查

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

> In dedicated config files   //独立放置，通常我们会选择独立放置，让package.json整洁一些
  In package.json      //放package.json里

? Save this as a preset for future projects? (y/N)
  //是否记录一下以便下次继续使用这套配置
  // 如果选择保存之后，会让你写一个配置的名字：
  ? Save preset as:project_config