1. What is Vue Scaffolding?

I have an article that introduces the relevant knowledge of webpack configuration, including the development environment of Vue, but in real development, it is impossible for us to complete all webpack configurations from scratch for each project, which shows that the efficiency of development will be greatly reduced

So in real development, we usually use scaffolding to create a project. For Vue projects, we use Vue's scaffolding.
Scaffolding is actually a concept in construction engineering. In our software engineering, some tools that help us build projects are also called scaffolding.
Vue's scaffolding isVue CLI
CLI is Command-Line Interface, translated into command line interface
We can select the configuration of the project and create our project through the CLI
Vue CLI has built-in webpack related configuration, we don't need to configure it from scratch

Second, Vue CLI installation and use

Install Vue CLI (currently the latest version is v4.5.17)
We are doing a global installation, so that the project can be created at any time through the vue command
npm install @vue/cli -g
Upgrade Vue CLI
If it is an older version, you can upgrade it with the following command
npm update @vue/cli -g
Create a project with Vue commands
vue create 项目的名称

3. The process of vue create project

insert image description here

Fourth, the project directory structure

insert image description here

Five, the operation principle of Vue CLI

insert image description here
Follow the above flow chart to explain the operation principle of vue-cli in detail

When we run in the terminal npm run serve , we are actually runningvue-cli-service serve
When running , it will automatically find the files in the directory under the vue-cli-service servenode_modules folder.binvue-cli-service
As you can see in the vue-cli-service file as shown above, it will actually look for it again@vue下的cli-service下的bin下的vue-cli-service.js
After arriving at this file, it can be found that it is essentially carried out new Service()的操作，并且调用了run（）方法, and the service instance comes fromlib目录下的Service.js文件
So let's take a look lib目录下的Service.js文件. As shown in the figure below, the file exports a class. One step of the constructor of this class is to execute resolvePluginsthis function, and this function is to make a mapping to map each configuration file.
lib目录下的Service.js文件, and what needs to be called as shown in the run方法figure below, so let's take a look at what this run method does
According to the above figure, we find that this method will be called first init, so let's take a look at the init method.
According to the above figure, let's first look at how to load a user-defined configuration fileloadUserOptions()
Let's take a look again this.plugins.forEach中的apply. We need to pass in two parameters through the above analysis guide. First, let's take a look at the first parameter new PluginAPI(id, this). This parameter creates a new PluginAPI, so take a lookPluginAPI.js这个文件
Next, let's take a look at the essence of the apply function. Here we take the serve.js file as an example, and the same is true for other files such as build.js.
So after so many operations above, we now come to the place where webpack is executed. The above operations correspond to the steps of the flowchart. Let's take a look at how the specific webpack is executed.
The above resolveWebpackConfigmethod is the method provided in the Service.js file
So the operating principle of vue-cli is probably the above understanding.