vue-cli/docs

Table of Contents

• Introduction
• CLI
• CLI Service
• Configuration
  • webpack
  • browserslist
  • Babel
  • CSS
  • ESLint
  • TypeScript
  • Unit Testing
  • E2E Testing
• Environment Variables and Modes
• Development

Introduction

Vue CLI is a full system for rapid Vue.js development, providing:

• Interactive project scaffolding via @vue/cli.
• Zero config rapid prototyping via @vue/cli + @vue/cli-service-global.
• A runtime dependency (@vue/cli-service) that is:
  • Upgradeable;
  • Built on top of webpack, with sensible defaults;
  • Configurable via in-project config file;
  • Extensible via plugins
• A rich collection of official plugins integrating the best tools in the frontend ecosystem.

Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.

CLI

The CLI is installed globally and provides the vue command in your terminal:

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

For full details on what the vue command can do, see the full CLI docs.

CLI Service

@vue/cli-service is a dependency installed locally into every project created by @vue/cli. It contains the core service that loads other plugins, resolves the final webpack config, and provides the vue-cli-service binary to your project. If you are familiar with create-react-app, @vue/cli-service is essentially the equivalent of react-scripts, but more flexible.

Inside a project, you can access the binary directly as vue-cli-service in npm scripts, or as ./node_modules/.bin/vue-cli-service from the terminal. This is what you will see in the package.json of a project using the default preset:

{
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  }
}

Some CLI plugins will inject additional commands to vue-cli-service. For example, @vue/cli-plugin-eslint injects the vue-cli-service lint command. You can see all injected commands by running:

./node_modules/.bin/vue-cli-service help

You can also learn about the available options of each command with:

./node_modules/.bin/vue-cli-service help [command]

Configuration

Projects created from vue create are ready to go out-of-the-box. The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts.

However, we also understand that it's impossible to cater to every possible need, and the need of a project may also change over time. Projects created by Vue CLI allows you to configure almost every aspect of the tooling without ever needing to eject.

vue.config.js

Many aspects of a Vue CLI project can be configured by placing a vue.config.js file at the root of your project. The file may already exist depending on the features you selected when creating the project.

vue.config.js should export an object, for example:

// vue.config.js
module.exports = {
  lintOnSave: true
}

Check here for full list of possible options.

webpack

Probably the most common configuration need is tweaking the internal webpack config. Vue CLI provides flexible ways to achieve that without ejecting.

See here for full details.

browserlist

You will notice a browserlist field in package.json specifying a range of browsers the project is targeting. This value will be used by babel-preset-env and autoprefixer to automatically determine the JavaScript polyfills and CSS vendor prefixes needed.

See here for how to specify browser ranges.

Babel

Babel can be configured via .babelrc or the babel field in package.json.

All Vue CLI apps use @vue/babel-preset-app by default, which includes:

• babel-preset-env
• dynamic import syntax
• Object rest spread
• babel-preset-stage-2
• Vue JSX support

See @vue/babel-preset-app for preset options.

CSS

Vue CLI projects comes with support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus.

See here for more details on CSS related configurations.

ESLint

ESLint can be configured via .eslintrc or eslintConfig field in package.json.

See @vue/cli-plugin-eslint for more details.

TypeScript

TypeScript can be configured via tsconfig.json.

See @vue/cli-plugin-typescript for more details.

Unit Testing

• Jest

  See @vue/cli-plugin-unit-jest for more details.

• Mocha (via mocha-webpack)

  See @vue/cli-plugin-unit-mocha for more details.

E2E Testing

• Cypress

  See @vue/cli-plugin-e2e-cypress for more details.

• Nightwatch

  See @vue/cli-plugin-e2e-nightwatch for more details.

Environment Variables and Modes

It is a common need to customize the app's behavior based on the target environment - for example, you may want the app to use different API endpoints or credentials during development / staging / production environments.

Vue CLI has comprehensive support for specifying different environment variables - see the dedicated section for more details.

Development

• Contributing Guide
• Plugin Development Guide.