What is Vue Cli and how can we use it?

When it comes to quickly develop an application with Vue.js, developers who are experts in this framework often turn to Vue Cli, a complete system for rapid development.

Vue Cli provides you with:

• Interactive project scaffolding via @vue/cli.
• A runtime dependency (@vue/cli-service) that is:

1.  Upgradeable;
2.  Built on top of webpack, with sensible defaults;
3.  Configurable via project configuration file;
4.  Extensible via plugins

• A rich collection of official plugins that integrate the best tools in the frontend ecosystem.
• A complete graphical user interface for creating and managing Vue.js projects.

On the official website, they describe Vue Cli to us in this way “Vue CLI is intended to be the baseline of standard tools for the Vue ecosystem. It ensures that the various build tools work seamlessly along with sensible defaults so you can focus on writing your app instead of spending days arguing with configurations. At the same time, it still offers the flexibility to modify the configuration of each tool without the need to eject it.”

Vue Cli Components

Vue Cli has several parts and we present each one and what they work for:

Cli

The Cli consists of an npm package and it provides the vue command in your terminal. This package stands out for giving the ability to quickly mount a project through vue create. You can manage the projects using a graphical interface through vue ui.

CLI Service

The Cli service (@vue/cli-service) is a development dependency. It is an npm package installed locally on every project created by @vue/cli.

On their website, they explain that the CLI service is based on webpack and webpack-dev-server. In addition, it contains:

• The core service that loads other CLI plugins;
• An internal webpack configuration that is optimized for most applications;
• The vue-cli-service binary inside the project, comes with the basic service, build and watch commands.

Cli plugins

Cli plugins are nothing more than npm packages that can bring special features to your Vue Cli projects, like Babel/TypeScript transpilation, as well as ESLint integration, unit tests, and more.

Detecting a Vue Cli plugin is pretty straightforward because their names start with @vue/cli-plugin- (this one for built-in plugins) or vue-cli-plugin-, the latter for community plugins.

When you run the vue-cli-service binary inside your project, it automatically resolves and loads all CLI plugins listed in your project's .json package.

Plugins can be included as part of your project creation process or added to the project later. They can also be grouped into reusable presets.

We recommend you on video