# 文件结构

源码目录

# 调试环境搭建

• 安装依赖: npm i
• 安装rollup: npm i -g rollup
• 修改dev脚本，添加sourcemap，package.json

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

• 运行开发命令: npm run dev
• 引入前面创建的vue.js，samples/commits/index.html

<script src="../../dist/vue.js"></script>

术语解释:

• runtime:仅包含运行时，不包含编译器
• common:cjs规范，用于webpack1
• esm:ES模块，用于webpack2+
• umd: universal module definition，兼容cjs和amd，用于浏览器

# 入口

dev脚本中 -c scripts/config.js 指明配置文件所在

参数 TARGET:web-full-dev 指明输出文件配置项

// Runtime+compiler development build (Browser)
{
  '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,
  },
}

# 初始化流程

1. 入口 platforms/web/entry-runtime-with-compiler.js

扩展默认$mount方法:处理template或el选项

2. platforms/web/runtime/index.js

• 安装web平台特有指令和组件
• 定义__patch__:补丁函数，执行patching算法进行更新
• 定义$mount:挂载vue实例到指定宿主元素(获得dom并替换宿主元素)

4. core/index.js

初始化全局api 具体如下:

 
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick

initUse(Vue) // 实现Vue.use函数
initMixin(Vue)