It’s been almost two years since I last saw vue-CLI scaffolding. Vue-cli, the name is still the same, but the thing is not the same.

I see vuE-CLI changes

  1. It used to be that you had project templates on Github and pulled projects directly, but now everything is built in.
  2. The configuration of Webpack, which was previously exposed, is now wrapped in a called@vue/cli-serviceThe plugin.
  3. Vue-cli now initializes vuE3 projects, but is also compatible with VUE2.
  4. More vuE-CLI-related plug-ins are now packaged, such as:@vue/cli-plugin-babel.@vue/cli-plugin-eslintEtc.

Now vuE-CLI flowchart

Vue-steps for cli to generate projects

1. User interaction query

Familiar flavors Familiar recipes, as before, get the user’s intent from the Command library and pass it as a parameter to create

2. Configure preset Settings

Configure vueVersion, plugins, router, vuex, etc

3. Write the package.json file and install the plug-in

I created the project of VUe3, vue create MM, the project name is MM. At this point, package.json looks like this, and subsequent project generation operations will rely on these plug-ins.

4. Generator generates the project

This is where the key to generating the project code is. The rest of the generation is actually in the previous plug-in.

The most important thing it does is find the generator file in the previous package.json download and execute the methods in that file. Yes, each of the previous plug-ins has a generator file to help us generate the project.

@vue/cli-service plugin file directory:

Any familiar smells??

Yes, the vue-CLI initialized project template comes from the @vue/ CLI-service plug-in.

The next step is self-evident, just iterate through the file in the template folder and write it to your initialization project.

Generated project

This is basically the template file for the @vue/ CLI-service plug-in.

It is worth noting that the script command in package.json looks like this:

All commands go to vue-cli-service. Let me show you how to find this command and execute the corresponding file. In fact, when we run NPM run server in shell, it creates a temporary shell to execute the command. And by default it prefixes the command with the path node_modules/.bin so that the command we execute will look like this: node_modules/.bin/vue-cli-service server.

And you go to node_modules of your project and find the file that looks like this:

Yes, I went around to @vue/ CLI-service. As mentioned earlier, one of the major changes to vue-CLI is to move webPack configuration into this plug-in.

Write in the last

Vue-cli generation project is actually divided into two parts. The first part is to install the corresponding plug-in according to the configuration preset selected by the user, and the second part is to generate the corresponding project code according to the installed plug-in.

Actually write write like off topic, originally want to read the source code, but feel the source code does not have too many things can be used to write. And that’s what it ends up being, as an essay.

After reading vue-CLI source code, give me a feeling is similar, and create-react-app, umi these scaffolding are similar…

Ps: more and more lazy, haven’t written blog for a long time, have to pick up!!