目录

1、下载源码2、查找入口文件

1、下载源码

首先在Github上找到vue源码，使用git下载：

git clone https://github.com/vuejs/vue.git

安装依赖：

npm install

修改package.json的scripts里面的dev命令，添加--sourcemap，方便日后调试：

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

打包，这里注意使用带编译器的版本，执行刚刚修改的脚本命令：

npm run dev

打包完成后会在dist目录下找到这两个文件：

2、查找入口文件

我们从刚才打包的文件路径，找到scripts/config.js，在config.js文件中可以发现打包配置，它保存在builds数组中： 找到带编译器且运行在浏览器的配置（注意是开发环境dev）： 找到入口文件路径entry，它通过resolve方法生成路径（Vue这里其实做了一个相当于alias插件做的事情，为了方便借助node生成了一些常用的文件夹路径保存在变量中，就和我们在vue项目中常见的@一样）。往上翻可以看到这个方法：

const aliases = require('./alias')

const resolve = p => {

const base = p.split('/')[0]

if (aliases[base]) {

return path.resolve(aliases[base], p.slice(base.length + 1))

} else {

return path.resolve(__dirname, '../', p)

}

}

这里引入了alias.js文件，找到这个文件，里面是一些路径配置：

const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {

vue: resolve('src/platforms/web/entry-runtime-with-compiler'),

compiler: resolve('src/compiler'),

core: resolve('src/core'),

shared: resolve('src/shared'),

web: resolve('src/platforms/web'),

weex: resolve('src/platforms/weex'),

server: resolve('src/server'),

sfc: resolve('src/sfc')

}

通过分析这个文件，我们可以发现web这个字段对应的是src/platforms/web，通过resolve生成一个绝对路径，再结合build.js里面的resolve就可以生成最后的路径，但这里我们通过这个相对路径就可以找到。因此，直接跑到src下面的platforms中找到web目录，在web目录下找到entry-runtime-with-compiler.js文件： 这个文件导出了Vue 然而看代码发现它又导入了Vue 根据导入路径继续往下找： 然而它又导入了Vue： 再往下找，找到core目录下的index.js，注意从上文知道这个core和web一样是经过配置的： 打开它，好家伙。。。它又引入了Vue： 那就继续找： 打开它，终于发现了Vue函数声明： 我们发现这里其实就调用了一下_init方法，然而在文件中根本找不到。往下看，发现一堆函数调用： 打开initMixin发现原来在这块，通过原型添加了_init方法： 到这里我们终于找到了Vue的入口文件，可喜可贺，然而万里长征，这才是第一步。