Vue CLI v3 Project Creation Guide

# Vue CLI v3.x Project Creation Guide

Official Documentation (opens new window)

The CLI version used below is v3.11.0

# vue create

Run the following command to create a new project:

vue create hello-world

You will be prompted to pick a preset. You can either choose the default preset which comes with basic Babel + ESLint setup, or select "Manually select features" to pick the features you need.

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

1
2
3
4

The default preset only includes Babel + ESLint. If you need Router, CSS Pre-processors, etc., select "Manually select features".

Manually select features

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 # Transpile modern JS to older versions (for compatibility)
 ( ) TypeScript # Add TypeScript support
 ( ) Progressive Web App (PWA) Support # PWA support
 ( ) Router # Router
 ( ) Vuex # State management
 ( ) CSS Pre-processors # CSS pre-processors
 (*) Linter / Formatter # Use ESLint to check code quality
 ( ) Unit Testing # Unit testing
 ( ) E2E Testing  # E2E testing

1
2
3
4
5
6
7
8
9
10
11
12

The graphical interface provides feature descriptions

Use history mode for router? (Requires proper server setup for index fallback in production) By using the HTML5 History API, URLs no longer need the '#' character.

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

Pick a CSS pre-processor

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

Pick an ESLint config

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

Pick additional lint features

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

1
2
3

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

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

1
2
3
4
5
6
7
8
9
10

Save this as a preset for future projects?

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

~/.vuerc

Saved presets will be stored in a JSON file named .vuerc in the user's home directory. If you want to modify saved presets/options, you can edit this file.

# Graphical Interface

For those who are not yet very familiar with Vue CLI, you can use the graphical interface. Running the following command will automatically open the interface: