VueCLivx创建项目使用记录
# Vue CLi v3.x 创建项目使用记录
以下使用的CLi版本是 v3.11.0
# vue create
- 运行以下命令来创建一个新项目
vue create hello-world
1
- 你会被提示选取一个 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
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
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
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
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
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
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
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
2
3
4
5
6
7
8
9
~/.vuerc
被保存的 preset 将会存在用户的 home 目录下一个名为
.vuerc的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
# 图形化界面
对于Vue CLi使用还不是特别熟悉的同学，可以使用图形化界面。运行以下命令会自动打开界面
vue ui
1
图形化界面有中文系统，直观的功能界面，以及特性的介绍等。
编辑 (opens new window)