以下使用的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 (手动选择特性)
默认预设只包含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测试
图形化界面有对特性的介绍
- 使用路由器的历史记录模式？（需要适当的服务器设置才能在生产中进行索引回退）通过使用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)
- 选择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
- 选择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
- 选择附加的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）
- 你喜欢把配置放在什么地方？比如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)
- 将这次已选项保存为一个将来可复用的 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
图形化界面有中文系统，直观的功能界面，以及特性的介绍等。
