vue-cli introduction and installation

1. Introduction

vue-cli is a tool that is deeply integrated with vue . It can help us create vue projects quickly and create some scaffolding-related codes for us. When you really use vue to develop projects, you use vue-cli to create projects.

2. Introduction to vue-cli

Vue CLI is a complete system for rapid development based on Vue.js , providing:

• Interactive project scaffolding implemented by @vue/cli .
• Zero configuration prototype development achieved through @vue/cli + @vue/cli-service-global .
  
• A runtime dependency (@vue/cli-service)， that:
  
• (1) Upgradable;
• (2) Built on webpack with reasonable default configuration; 9
• (3) Can be configured through the configuration file in the project;
• (4) Can be extended through plug-ins.
  
• A rich collection of official plugins that integrates the best tools in the front-end ecosystem.
• A fully graphical user interface for creating and managing Vue.js projects.
  

Vue CLI is committed to standardizing the tooling foundation in the Vue ecosystem. It ensures that various build tools can be smoothly connected based on intelligent default configurations, so that you can focus on writing applications instead of spending days worrying about configuration issues. At the same time, it also provides flexibility to adjust the configuration of each tool without eject .

2.1 CLI

CLI (@vue/cli) is a globally installed npm package that provides vue commands in the terminal. It can quickly build a new project through vue create , or build a prototype of new ideas directly through vue serve . You can also manage all your projects through a graphical interface using vue ui .

2.2 CLI Service

CLI (@vue/cli-service) is a development environment dependency. It is an npm package that is installed locally in every project created by @vue/cli .
CLI server is built on top of webpack and webpack-dev-server . It contains:

• Core service for loading other CLI plugins;
• An internal webpack configuration optimized for most applications;
• The vue-cli-service command within the project provides serve , build , and inspect commands.
  

2.3 CLI plugin

CLI plugins are npm packages that provide optional functionality to your Vue projects, such as Babel/TypeScript transpilation, ESLint integration, unit testing, end-to-end testing, etc. Vue CLI plugins have names starting with @vue/cli-plugin- (built-in plugins) or vue-cli-plugin - (community plugins) and are very easy to use.

When you run the vue-cli-service command inside your project, it will automatically resolve and load all CLI plugins listed in package.json .

Plugins can be created as part of the project creation process, or added to the project at a later stage. They can also be grouped into a set of reusable preset .

3. @vue-cli installation

Vue CLI 4.x requires Node.js v8.9 or higher (v10 or higher is recommended). You can use n , nvm , or nvm-windows to manage multiple Node versions on the same computer.

The installation command is as follows:

npm install -g @vue/cli

You can use this command to check whether its version is correct

vue --version

This is the end of this article about the introduction and installation of vue-cli. For more relevant vue-cli introduction and installation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!