vue-cli/docs/cli.md

CLI

• Installation
• Usage
• Launch the GUI
• Creating a New Project
• Presets
• Zero-config Prototyping
• Installing Plugins in an Existing Project
• Inspecting the webpack Config
• Pulling 2.x Templates

Installation

npm install -g @vue/cli
vue create my-project

Usage

Usage: vue <command> [options]

Commands:

  create [options] <app-name>      create a new project powered by vue-cli-service
  invoke <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]     inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]          serve a .js or .vue file in development mode with zero config
  build [options] [entry]          build a .js or .vue file in production mode with zero config
  ui [options]                     start and open the vue-cli ui
  init <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)

For each command, you can also use vue <command> --help to see more detailed usage.

Launch the GUI

Usage: ui [options]

start and open the vue-cli ui


Options:

  -p, --port <port>  Port used for the UI server (by default search for awailable port)
  -h, --help         output usage information

Creating a New Project

Usage: create [options] <app-name>

create a new project powered by vue-cli-service


Options:

  -p, --preset <presetName>       Skip prompts and use saved preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
  -f, --force                     Overwrite target directory if it exists
  -h, --help                      output usage information

vue create my-project

Presets

After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects. If you want to delete or tweak a saved preset, you can do that by editing ~/.vuerc.

A preset is defined in JSON. If you have saved a preset via the command line and then open ~/.vuerc, you will find something like the following:

{
  "useConfigFiles": true,
  "router": true,
  "vuex": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
  }
}

The preset data is used by plugin generators to generate corresponding project files. In addition to the above fields, you can also add additional configuration for integrated tools:

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

These additional configurations will be merged into package.json or corresponding config files, depending on the value of useConfigFiles. For example, with "useConfigFiles": true, the value of configs.vue will be merged into vue.config.js.

Preset Plugin Versioning

You can explicitly specify versions of the plugins being used:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... other options for this plugin
    }
  }
}

Note this is not required for official plugins - when omitted, the CLI will automatically use the latest version available in the registry. However, it is recommended to provide a explicit version range for any 3rd party plugins listed in a preset.

Remote Presets

You can share a preset with other developers by publishing it in a git repo. The repo should contain a preset.json file containing the preset data. You can then use the --preset option to use the remote preset when creating a project:

# use preset from GitHub repo
vue create --preset username/repo my-project

GitLab and BitBucket are also supported. Make sure to use the --clone option if fetching from private repos:

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

Zero-config Prototyping

You can rapidly prototype with just a single *.vue file with the vue serve and vue build commands, but they require an additional global addon to be installed first:

npm install -g @vue/cli-service-global

The drawback of vue serve is that it relies on globally installed dependencies which may be inconsistent on different machines. Therefore this is only recommended for rapid prototyping.

vue serve

Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config


Options:

  -o, --open  Open browser
  -h, --help  output usage information

All you need is a *.vue file:

echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve

vue serve uses the same default setup (webpack, babel, postcss & eslint) as projects created by vue create. It automatically infers the entry file in the current directory - the entry can be one of main.js, index.js, App.vue or app.vue. You can also explicitly specify the entry file:

vue serve MyComponent.vue

If needed, you can also provide an index.html, package.json, install and use local dependencies, or even configure babel, postcss & eslint with corresponding config files.

vue build

Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config


Options:

  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information

You can also build the target file into a production bundle for deployment with vue build:

vue build MyComponent.vue

vue build also provides the ability to build the component as a library or a web component. See Build Targets for more details.

Installing Plugins in an Existing Project

Each CLI plugin ships with a generator (which creates files) and a runtime plugin (which tweaks the core webpack config and injects commands). When you use vue create to create a new project, some plugins will be pre-installed for you based on your feature selection. In case you want to install a plugin into an already created project, you can do so with the vue add command:

vue add @vue/eslint

Note: it is recommended to commit your project's current state before running vue add, since the command will invoke the plugin's file generator and potentially make changes to your existing files.

The command resolves @vue/eslint to the full package name @vue/cli-plugin-eslint, installs it from npm, and invokes its generator.

# these are equivalent to the previous usage
vue add @vue/cli-plugin-eslint

Without the @vue prefix, the command will resolve to an unscoped package instead. For example, to install the 3rd party plugin vue-cli-plugin-apollo:

# installs and invokes vue-cli-plugin-apollo
vue add apollo

You can also use 3rd party plugins under a specific scope. For example, if a plugin is named @foo/vue-cli-plugin-bar, you can add it with:

vue add @foo/bar

Finally, you can pass generator options to the installed plugin:

vue add @vue/eslint --config airbnb --lintOn save

If a plugin is already installed, you can skip the installation and only invoke its generator with the vue invoke command. The command takes the same arguments as vue add.

Inspecting the Project's Webpack Config

You can use vue inspect to inspect the webpack config inside a Vue CLI project. See Inspecting Webpack Config for more details.

Pulling vue-cli@2.x Templates (Legacy)

@vue/cli uses the same vue binary, so it overwrites vue-cli@2.x. If you still need the legacy vue init functionality, you can install a global bridge:

npm install -g @vue/cli-init
# vue init now works exactly the same as vue-cli@2.x
vue init webpack my-project