Vue CLi v3 创建项目使用记录

官方文档 (opens new window)

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

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: Manuallyselect 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: Manuallyselect 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: Manuallyselect 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: Manuallyselect 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: Manuallyselect 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: Manuallyselect 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

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