先从package.json > dev看起

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"

这条命令使用的配置文件的地址是scripts目录下的config.js文件，使用了sourcemap和environment两个选项，TARGET是web-full-dev

打包配置文件

scripts/config.js

if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}

根据打包的命令中的TARGET选择具体的打包配置

'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
  }

根据entry，可以找到打包的入口文件 src/platforms/web/entry-runtime-with-compiler.js

入口文件及全局方法挂载

src/platforms/web/entry-runtime-with-compiler.js
这里对Vue的$mount方法进行了扩展，该方法判断了render,template和el属性并进行了转换
这三个属性的优先级 render > template > el，若render存在则直接使用render，否则将template或el转换为render函数

src/platforms/web/runtime/index.js
该文件对Vue添加了$mount函数和patch函数(patch用于对dom进行diff)

src/core/index.js
初始化全局API

src/core/global-api/index.js
1.在util中添加defineReactive等属性或方法
2.添加set、delete、nextTick、observe等方法
3.初始化use、mixin、extend和静态注册等

接下来就是最重要的Vue构造函数的实现了
src/core/instance/index.js
在该文件中实现了Vue的构造函数，并进行了一些初始化操作
1、initMixin，添加_init函数，该函数将在实例化Vue时有Vue的构造函数调用，以初始化
2、stateMixin，混入部分实例属性，如$data、$props、$set、$delete、$watch等
3、eventMixin，事件混入，$on、$once、$off、$emit
4、lifecycleMixin，生命周期混入，$forceUpdate、$destory
5、renderMixin，渲染相关的混入，$nextTick，并添_render函数和安装一些辅助渲染的函数

思维图

共同进步

Vue源码学习(一)

打包配置文件

入口文件及全局方法挂载

思维图