Introduction and Installation of vue cli
- 2021-12-04 09:14:44
- OfStack
1. Preface
vue-cli
Yes and
vue
A tool for deep combination can quickly help us create
vue
Project, and give us some scaffolding-related codes to create. The real use of vue development projects is to use
vue-cli
To create the project.
2. Introduction of vue-cli
Vue CLI
Is one based on
Vue.js
A complete system for rapid development, providing:
@vue/cli
Implement interactive project scaffolding.
Pass
@vue/cli + @vue/cli-service-global
Implementation of zero configuration prototype development.
1 runtime dependency
(@vue/cli-service)，
The dependency:
(1) Upgradable; (2) Based on
webpack
Build with reasonable default configuration; 9
(3) It can be configured through the configuration file in the project;
(4) It can be extended through plug-ins.
A rich collection of official plug-ins, integrating the best tools in the front-end ecosystem. 1 set of fully graphical creation and management
vue0
The user interface of the project.
vue1
Committed to putting
vue2
Standardization of tool foundation in ecology. It ensures that the various build tools can be smoothly connected based on intelligent default configuration, so that you can focus on writing applications instead of spending days struggling with configuration issues. At the same time, it also provides flexibility for each tool to adjust the configuration without
vue3
.
2.1. CLI
vue4
Is a globally installed
vue5
Package, which provides the
vue6
Orders. It can pass through
vue7
Quickly build a new project, or directly through
vue8
Build prototypes of new ideas. You can also go through
vue9
Manage all your projects through a set of graphical interfaces.
2.2. CLI Service
vue0
Services
vue1
Is a development environment dependency. It is one
vue5
Package, locally installed in each
@vue/cli
In the project created by.
vue0
Services are built on
webpack
And
vue6
Above. It contains:
vue0
Core services of plug-ins;
1 internal optimized for most applications
webpack
Configuration;
Within the project
vue9
Command, providing
vue-cli0
,
vue-cli1
And
vue-cli2
Orders.
2.3. CLI Plug-in
vue0
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
Tests, etc.
Vue CLI
The name of the plug-in is named after
@vue/cli-plugin-
(Built-in plug-in) or
vue-cli-plugin
-(community plug-in) beginning, very easy to use.
When you run inside the project,
vue-cli-service
Command, it will automatically parse and load
package.json
All listed in the
vue0
Plug-ins.
Plugins can be used as part of the project creation process or added to the project at a later stage. They can also be grouped into a group of reusable
preset
.
3. @ vue-cli installation
Vue CLI 4.x
Need
Node.js v8.9
Or later (v10 or above is recommended). You can use
n
,
nvm
Or
nvm-windows
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 the version is correct
vue --version