How to learn vUE source, debugger step by step to read Vue source may be the most effective. This article describes how to go to the debugger Vue source code.

1. Download the source code to install the dependency

// Download the source code
git clone  https://github.com/vuejs/vue.git 
// Install dependencies
npm i
Copy the code

There are plenty of examples in the project’s examples directory. Open any of them, copy the index.html path, and open them in your browser.

At this point, our demo refers to vue.min.js file, and there is no source of vue SRC directory under sources file

2. Make two changes to the source debugger

  1. We can see that the vUE referenced in this demo is a compressed version. We’ll reference /dist/vue.js instead
// Set the reference to demo by
<script src=".. /.. /dist/vue.min.js"></script>
/ / to
<script src=".. /.. /dist/vue.js"></script>

Copy the code

Description:When we run NPM run dev locally, the scripts command is executed: Rollup -w -c scripts/config.js –environment TARGET:web-full-dev TARGET:web-full-dev rollup -w -c scripts/config.js –environment TARGET:web-full-dev Vue source code is compiled and generated and output to the /dist/vue.js fileThus, the vue.js file generated by NPM run dev is the one we use for our test project.

  1. –sourcemap added to dev script command in package.json file
 "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",
    ...
 }
Copy the code

Vue. Js is a package compiled version, not source code; To enable debugger source code, you need to add sourcemap to the compiled code. Sourcemap is a file that stores a mapping between source code and compiled code. We can see that in the dist directory there is a vue.js file and a vue.js.map file. The last line of the vue.js file has //# sourceMappingURL=vue.js.map

3. Run the vue

npm run dev
Copy the code

Copy the index.html path of the demo and open it in your browser

At this point we are free to debug the interrupt point.