跳至主要內容

Vue CLi v3 创建项目使用记录

Mr.Chen《Vue》笔记工具Vue大约 3 分钟约 984 字

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

官方文档open in new window

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

vue create

  1. 运行以下命令来创建一个新项目
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 (手动选择特性)

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

  1. 手动选择特性
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. 使用路由器的历史记录模式?(需要适当的服务器设置才能在生产中进行索引回退)通过使用 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. 选择 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. 选择 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. 选择附加的 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. 你喜欢把配置放在什么地方?比如 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. 将这次已选项保存为一个将来可复用的 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

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

上次编辑于: