Vue source code read a (first knowledge of vUE source code)

First find build under package.jsonFrom here we can see the entry address of this compilation. So let’s go in here.Builds are the rollup profile.

If you go to the./config file, you can see that the Build object is a build configuration that builds the file, and then the genconfig method is used to further process the rollup configuration file, which becomes the builds configuration file under build.js.

So let’s focus on.config

'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd'.env: 'development'.alias: { he: './entity-decoder' },
    banner
  }
Copy the code

The resolve method mainly calls aliases to find the absolute path.So we need an entry, ‘SRC /platforms/web/entry-runtime-with-compiler.js’

Let’s go into this file to take a quick look at the vUE creation process.

First, the entry-runtime-with-Compiler. js file is introduced into Vue from other files, so let’s go deeper layer by layer.

//entry-runtime-with-compiler.js
import Vue from './runtime/index'
//./runtime/index
import Vue from 'core/index'
//core/index
import Vue from './instance/index'
//src/code/instance/index.js
Copy the code

All the way down to this file, you find the vue constructor.

And then do some initialization

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
Copy the code

Click through one by one and you can see that this is mainly to assign to the Vue. Prototype function, that is, to the Vue prototype object.Back to thecore/index.jsUnder this file

Mainly Vue static method assignment.

initGlobalAPI(Vue)
Copy the code

You can see it by clicking in. ./runtime/indexThe following are the main configurations of vue.config

entry-runtime-with-compiler.jsBelow is the $mount method

Ok, the above is a general process of VUE, specific details, I hope we can do well in the future.