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

官方文档

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

vue create

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

vue create hello-world

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

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

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

3. 手动选择特性

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测试

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

4. 使用路由器的历史记录模式？（需要适当的服务器设置才能在生产中进行索引回退）通过使用 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)

5. 选择 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

6. 选择 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

7. 选择附加的 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）

8. 你喜欢把配置放在什么地方？比如 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)

9. 将这次已选项保存为一个将来可复用的 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)

~/.vuerc

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

图形化界面

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

vue ui

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