This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

An overview of

Something that summarizes some of the underlying principles of VUE recently. The best and most direct way is not to read vue source code. If you can start a service, open an HTML, modify the source code, compile it in real time, and be able to break points in the source code as if you were a VUE developer, it’s not great. In fact, the steps of this process are quite simple.

  1. Pull code, install dependencies
  2. Locate the rollup configuration file
  3. Configure rollup with rollup-plugin-serve

Environmental installation

  1. Download code: official Github repository download, the version I use this time is:v2.6.14
  2. Install dependencies:Dependency installation takes some time, please be patient...

Find the entrance

To find the entry point, you first need to understand the hierarchy in which Vue packages files. It can be divided into Web and WEEX according to the platform. And according to the function is divided into: 1. Run time, 2. Compile, 3. It is divided into CommonJS and ESModule according to the packaging method.

  1. According to the dev script command, the configuration file is scripts/config.js. The package type is web-full-dev

2. Find the web-full-dev configuration as shown in the following figure. The red arrow is the entry fileBrowsers /platforms/web/entry-runtime-with-compiler.js

Configure serve& debug code

Rollup dev rollup dev rollup dev rollup dev rollup dev rollup dev rollup dev rollup dev rollup dev rollup dev rollup dev Rollup dev Rollup dev Rollup dev Rollup dev Rollup dev Rollup dev Rollup dev Rollup dev Rollup dev Rollup devCreate an HTML file under scripts. The introduction ofdist/vue.js

Debugging code

  1. Run the NPM run dev command. The browser will automatically open:http://localhost:3005/scripts/index.html

Now we have fun debugging the code. Here is a breakpoint in the source code.Refresh the page and enter the breakpoint

conclusion

Vue3 should be up and running in no time following the same approach. After such an uncomplicated operation, when we look at the source code will not have so drift, more solid!