Vue-CLI v4.5.7 创建项目实操手记
- 聚客宝
- 2021-08-07 11:30:31
>> vue create myapp
（一）选择手动配置还是默认配置
Vue CLI v4.5.7
? Please pick a preset: (Use arrow keys)
> jukebao-error ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
Vue CLI v4.5.7
? Please pick a preset:
jukebao-error ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
（二）选择你需要的配置项
Vue CLI v4.5.7
? 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)
>(*) Choose Vue version
(*) Babel
//转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript
// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support
// 渐进式Web应用程序
( ) Router
（vue路由）
( ) Vuex
vue的状态管理模式
( ) CSS Pre-processors
CSS 预处理器（如：less、sass）
(*) Linter / Formatter
代码风格检查和格式化（如：ESlint）
( ) Unit Testing
单元测试（unit tests）
( ) E2E Testing
e2e（end to end） 测试
项目实际选项：
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project:
( ) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
>(*) Unit Testing
( ) E2E Testing
（三）选择是否使用history router
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
Use history mode for router? (Requires proper server setup for index fallback in production)
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。路径中是否带 /#/
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
（四）选择css 预处理器
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? 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
我选择的是Sass/Scss(with dart-sass)
node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。
（五）选择Eslint代码验证规则
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? 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
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier
（六）选择什么时候进行代码规则检测
建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? 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时候检查
（七）选择单元测试
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
> Mocha + Chai //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
Jest //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
（七）选择如何存放配置
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
In package.json
（八）是否保存当前配置
Vue CLI v4.5.7
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
键入N不记录，如果键入Y需要输入保存名字，如第2步所看到的我保存的名字为test
Vue CLI v4.5.7
✨ Creating project in E:\inetpub-demo\vue-cli\vue-cli-hao.
� Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
> nodent-runtime@3.2.1 install E:\inetpub-demo\vue-cli\vue-cli-hao\node_modules\nodent-runtime
> node build.js
## Built E:\inetpub-demo\vue-cli\vue-cli-hao\node_modules\nodent-runtime/dist/index.js
> yorkie@2.0.0 install E:\inetpub-demo\vue-cli\vue-cli-hao\node_modules\yorkie
> node bin/install.js
setting up Git hooks
done
> core-js@2.6.11 postinstall E:\inetpub-demo\vue-cli\vue-cli-hao\node_modules\@babel\runtime-corejs2\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js@3.6.5 postinstall E:\inetpub-demo\vue-cli\vue-cli-hao\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> ejs@2.7.4 postinstall E:\inetpub-demo\vue-cli\vue-cli-hao\node_modules\ejs
> node ./postinstall.js
added 1359 packages from 1408 contributors in 27.746s
55 packages are looking for funding
run `npm fund` for details
� Invoking generators...
� Installing additional dependencies...
added 84 packages from 70 contributors in 7.737s
60 packages are looking for funding
run `npm fund` for details
Running completion hooks...
Generating README.md...
Successfully created project vue-cli-hao.
Get started with the following commands:
$ cd vue-cli-hao
$ npm run serve