Vue CLi v3 创建项目使用记录

# Vue CLi v3.x 创建项目使用记录

以下使用的CLi版本是 v3.11.0

# vue create

运行以下命令来创建一个新项目

vue create hello-world

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

Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features (手动选择特性)

1
2
3
4

默认预设只包含Babel + ESLint，如需要使用到Router、CSS Pre-processors（CSS预处理器）等需要选手动选择特性。

手动选择特性

Vue CLI v3.11.0
? 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 # 将现代JS转成旧版本（出于兼容性考虑）
 ( ) TypeScript # 添加对TS的支持
 ( ) Progressive Web App (PWA) Support # 渐进式Web应用程序（PWA）的支持
 ( ) Router # 路由
 ( ) Vuex # 状态管理
 ( ) CSS Pre-processors # css预处理器
 (*) Linter / Formatter # 使用ESLint检查代码质量
 ( ) Unit Testing # 单元测试
 ( ) E2E Testing  # E2E测试

1
2
3
4
5
6
7
8
9
10
11
12

图形化界面有对特性的介绍

使用路由器的历史记录模式？（需要适当的服务器设置才能在生产中进行索引回退）通过使用HTML5历史记录API，URL不再需要'＃'字符。

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

1
2
3
4

选择css预处理器

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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)
  Sass/SCSS (with node-sass)
  Less
> Stylus

1
2
3
4
5
6
7
8
9

选择ESLint配置

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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): Stylus
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config (标准配置)
  ESLint + Prettier

1
2
3
4
5
6
7
8
9
10

选择附加的lint特性？

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save （保存时检查lint）
 ( ) Lint and fix on commit （提交时 lint 和 fix）

1
2
3

你喜欢把配置放在什么地方？比如Babel、PostCSS、ESLint等配置

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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): Stylus
? 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
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files (在专用的配置文件)
  In package.json (在package.json)

1
2
3
4
5
6
7
8
9
10

将这次已选项保存为一个将来可复用的 preset （预设）？

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? 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): Stylus
? 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
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

1
2
3
4
5
6
7
8
9

~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。

# 图形化界面

对于Vue CLi使用还不是特别熟悉的同学，可以使用图形化界面。运行以下命令会自动打开界面

vue ui

图形化界面有中文系统，直观的功能界面，以及特性的介绍等。

编辑

#Vue

← Mixin混入 vuex操作相关→