vue-cli3 搭建vue项目

本文篇主要讲windows系统下的操作

win+r --> cmd --> 回车
然后一波操作… 来到你的本地workspace

vue create myobject

你会被提示选取一个 preset（预设）。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。这里咱们使用自定义来创建（按键盘 ↑ ↓ 来切换选择，回车确认）

↓回车之后如下

? 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)
>(*) Babel									// Babel编译
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors						// CSS预编译器（包括：SCSS/Sass、Less、Stylus）
 (*) Linter / Formatter 					// 代码检测和格式化
 ( ) Unit Testing							// 单元测试
 ( ) E2E Testing							// 端到端测试

根据项目具体情况选择不同的配置，
空格键：选中/反选；
按a键：全选/全不选；
按i键：反选已选择项；
上下键：上下移动选择。
回车：进入下一步

Babel
可以帮我们将 高级的语法转换为低级的语法，这个必选。如有特殊需求，Babel 可以通过 babel.config.js 进行配置。

CSS Pre-processors：
选择CSS 预处理类型：Pick a CSS pre-processor

Linter / Formatter
选择Linter / Formatter规范类型：Pick a linter / formatter config
选择lint方式，保存时检查/提交时检查：Pick additional lint features

↓回车之后如下

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? 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   

这一项按个人习惯选择，本文选择dart-sass
sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现，运行会慢一点；node-sass是自动编译实时的，dart-sass需要保存后才会生效。

↓回车之后如下

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier            

Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，并且对各个插件的版本有所要求。

你可以执行以下命令查看所依赖的各个版本：

npm info "eslint-config-airbnb@latest" peerDependencies

这里选择Airbnb，不安标准来，代码编译不通过
↓回车之后如下

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit 

选择保存时校验
↓回车之后如下

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json            

In dedicated config files： 单独保存在各自的配置文件中
In package.json： 保存在package.json文件中

这里选择单独文件配置
↓回车之后如下

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)    

y保存这一次的配置下次使用，这一步随意。

接下来就是准备编码了

cd myobject
# 项目启动
npm run serve
# 打包
npm run build