Introduction to the Vue CLI

Warning

This document corresponds to @vue/cli. For older versions of the vue-cli document, move here.

The Vue CLI is a complete system for rapid .js based on Vue's data, providing:

• Build @vue project scaffolding with a built-in/cli.
• Start @vue-configuration prototyping @vue/cli-service-global with the 2007/cli-@vue/cli-service-global.
• A runtime dependency (@vue/cli-service), which can be upgraded, built on a webpack with a reasonable default configuration, configured with a profile within the project, and extended through plug-ins.
• A rich collection of official plug-ins that integrate the best tools in the front-end ecology.
• A fully graphical user interface for creating and managing Vue.js projects.

The Vue CLI is committed to standardizing the tool base in the Vue ecosystem. I t ensures that the various build tools are able to connect smoothly based on intelligent default configurations, so you can focus on composing your app without spending days tangled up configuration issues. At the same time, it gives each tool the flexibility to adjust its configuration without the need for eject.

The components of the system

The Vue CLI has several separate sections -- if you look at our source code, you'll find that the repository manages multiple separately released packages at the same time.

Cli

The CLI (@vue/cli) is a globally installed npm package that provides the vue command in the terminal. I t can quickly create scaffolding for a new project with vue create, or prototype new ideas directly from vue serve. Y ou can also manage all your projects through a graphical interface through vue ui. We'll take a step-by-step look at the next guide.

CLI services

CLI services (@vue/cli-service) are a dependency of the development environment. It is an npm package that is partially installed in @vue created by each file.

CLI services are built on webpack and webpack-dev-server. It contains:

• Load the core services of other CLI plug-ins;
• An internal webpack configuration optimized for most applications;
• The vue-cli-service command inside the project, which provides the serve, build, and inspect commands.

If you're familiar with create-react-app, @vue/cli-service is actually roughly equivalent to react-scripts, although the collection of features is different.

The CLI Services section covers its specific usage.

CLI plug-in

Cli plug-ins are npm packages that provide optional features to your Vue project, such as Babel/TypeScript translation, ESLint integration, unit testing, and end-to-end testing. The name of the Vue CLI plug-in starts with @vue/cli-plugin- (built-in plug-in) or vue-cli-plugin-(community plug-in) and is very easy to use.

When you run the vue-cli-service command inside the project, it automatically resolves and loads all the CLI plug-ins listed in package.json.

Plug-ins can be part of the project creation process or later added to the project. T hey can also be grouped into a set of reusable presets. We'll discuss it in depth in the plug-in and preset sections.