创建项目

1
vue create project

选择配置

1
2
3
? Please pick a preset: (Use arrow keys) (使用箭头键)
> default (babel, eslint) (使用默认的配置,会安装babel和eslint)
Manually select features (手动配置)

可能会有vue2.x和vue3.x选项,分别对应vue的版本号,可根据自己需求选择

一般我是选择手动配置

手动配置项选择

1
2
3
4
5
6
7
8
9
10
11
? 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 (转码器,可以将ES6代码转为ES5代码)
( ) TypeScript ( js的超集,强类型语言)
( ) Progressive Web App (PWA) Support (渐进式Web应用程序)
( ) Router (vue-router(vue路由))
( ) Vuex (vuex(vue的状态管理模式))
( ) CSS Pre-processors (CSS 预处理器(如:less、sass))
(*) Linter / Formatter (代码风格检查和格式化(如:ESlint))
( ) Unit Testing (单元测试)
( ) E2E Testing (集成测试)

根据自己项目的实际需求选择合适的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
?Use class-style component syntax? (Y/n): (是否使用babel做转义)

---------------------------------------------------------------------------------------
?Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (使用Babel与TypeScript一起用于自动检测的填充)

---------------------------------------------------------------------------------------
?Use history mode for router? (Requires proper server setup for index fallback in production) (路由模式)

--------------------------------------------------------------------------------------
?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) (CSS编译器)
> Sass/SCSS (with dart-sass) (保存后编译)
Sass/SCSS (with node-sass) (实时编译)
Less
Stylus
----------------------------------------------------------------------------------------
?Pick a linter / formatter config: (Use arrow keys) ☜(选择语法检查规范)
> 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 (fix和commit时候检测)
-----------------------------------------------------------------------------------------
? Pick a unit testing solution
>(*) Mocha + Chai (mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装)
( ) Jest (安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect)
------------------------------------------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) (选择如何存放配置测)
> In dedicated config files (独立文件放置)
In package.json (放package.json里)
-----------------------------------------------------------------------------------------
? Save this as a preset for future projects? (y/N) (保存上述配置,保存后下一次可直接根据上述配置生成项目,就是上面提到的第三种情况)

这里我做的选择是

创建完成

到这里配置就基本完成了,等待项目加载各种包…

加载完成后,进入项目

1
npm run serve

启动就可以了…