--本文采自本人公众号【猴哥别瞎说】
源码结构目录
写在前面
源码解读的vue版本为：2.6.10。 标注有对应注释的源码地址：src.
vue源码解读文章目录：
Vue 更多系列：
如何开启源码的阅读
想要阅读源码，但是从 github 上面拉下来代码之后，却不知如何下手。我想这是很多人遇到的难题。
以 vue2.6.x 系列为例，当我们 git pull 源码之后，打开文件结构，可能会一脸懵逼。这时候，我们需要对源码的基本结构有一个大致的了解。
了解源码的基本结构
/vue
/dist :生成最终文件存放的文件夹
/example : 官方提供的案例代码
/flow : flow类型声明文件
/packages : 代码里用到的独立外部包文件
/scripts : 打包脚本，配置等
/src : 核心代码
/compiler : 编译器
/core : 核心代码（通用代码）
/platforms : 平台代码（特殊代码）
/web : 网页端代码
/weex : 移动端代码
/server ： 服务端相关
/sfc : 单文件解释器
/shared : 共享逻辑代码
/test : 测试文件
这些文件夹的含义，大致可以通过其名字就可以知道大致的作用。其中src下面的三个文件夹，将会是源码阅读的重点：compiler、core、platforms。
那么，下一个问题来了，我们如何去阅读源码呢？整个项目的入口在哪里？
这个时候我们需要看看 package.json 的指令。查看dev命令：
"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
我们看到了TARGET有一个指向：web-full-dev。其含义应该是web环境下的Dev模式。全局搜索整个关键字，发现在/scripts/config.js文件中有这样的描述：
// runtime-only build (Browser)
'web-runtime-dev': {
entry: resolve('web/entry-runtime.js'),
dest: resolve('dist/vue.runtime.js'),
format: 'umd',
env: 'development',
banner
}
这个时候，通过解析resolve函数，我们就可以发现入口文件在src/platforms/web/entry-runtime-with-compiler.js。
于是，找到入口了。
使用chrome浏览器的调试功能
下一步，我们希望能够在本地能够调试源码。这个时候，我们需要做下面的步骤：
1.安装依赖：npm i
2.安装rollup : npm i -g rollup
3.修改package.json的dev脚本，添加sourcemap属性，让调试时候可以定位到源码
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
4.运行开发命令：npm run dev
5.编写一个最简单的html文件，引用创建的vue.js文件。
<script src="path/to/dist/vue.js"></script>
6.使用chrome浏览器打开该文件。
7.接下来就可以在浏览器愉快地调试代码了。
