vue 快速入门 系列 —— vue-cli 上 (2)

提示选取一个预设(preset)。

Vue CLI v4.5.13 ? Please pick a preset: Default ([Vue 2] babel, eslint) // 默认选项 vue2 Default (Vue 3) ([Vue 3] babel, eslint) // 默认选项 vue3 > Manually select features // 手动选择

Tip:笔者使用 powershell 终端,可以通过上下键来切换选项

默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。

如果选择 default 则会直接创建项目,创建项目包括 babel,eslin 这些工具,而 vue-router,vuex等其他依赖需要自己手动安装。

由于我们的项目需要 vue-router、vuex,所以就选择“手动选择”。

Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version // vue 的版本 (*) Babel // 代码编译 (*) TypeScript // ts (*) Progressive Web App (PWA) Support // 渐进式网页应用程序 (*) Router // 路由 - vue router (*) Vuex // 状态管理 - vuex (*) CSS Pre-processors // css预处理 (*) Linter / Formatter // 代码风格、格式校验 (*) Unit Testing // 单元测试 >(*) E2E Testing // 端对端测试

Tip:这里为了演示,所以选择全部(笔者使用空格键来选中或取消)

全部选中后,回车,会依次询问我们对应特性的一些具体需求,比如 vue 的版本、是否使用class风格的组件语法、路由是否使用 history 模式等等:

Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 2.x 3.x

选择 vue 2,回车:

Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? (Y/n)

这里询问的是是否使用class风格的组件语法,如果在项目中想要保持使用TypeScript的class风格的话,建议大家选择 y:

... ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

将 Babel 与 TypeScript 一起使用,选择 y:

... ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

路由是否使用 history 模式。因为 history 需要额外配置,所以这里选用 hash,输入n:

// CSS Pre-processors ... ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? 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

选择一种CSS预处理类型,笔者选用 less:

// Linter / Formatter ... ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only // 只进行报错提醒 ESLint + Airbnb config // airbnb 模式 ESLint + Standard config // 标准模式 ESLint + Prettier // prettier 模式 TSLint (deprecated) // 已弃用

选择 eslint 模式,笔者选标准模式:

... ? Pick a linter / formatter config: Standard ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit

选择校验时机,一般都会选择保存时校验,好及时做出调整,笔者选第一项:

// Unit Testing ... ? Pick additional lint features: Lint on save ? Pick a unit testing solution: (Use arrow keys) > Mocha + Chai Jes

选择单元测试解决方案,普遍用到最多的时Mocha + chai,我们也选第一项。

// E2E Testing E2E(End To End) ... ? Pick a unit testing solution: Mocha ? Pick an E2E testing solution: (Use arrow keys) > Cypress (Chrome only) Nightwatch (WebDriver-based) WebdriverIO (WebDriver/DevTools based)

选择端对端测试的类型,默认回车:

// 额外选项 ... ? Pick an E2E testing solution: Cypress ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files // 在专用配置文件中 In package.json

选择 Babel, ESLint 等配置存放位置,建议使用第一个(专用配置文件)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzyzjd.html