vue2源码学习 — new Vue()

vue2源码学习 — new Vue()

参考：https://blog.csdn.net/qq_36782473/article/details/109108477

调试环境

获取vue源码

项目地址：https://github.com/vuejs/vue

调试环境搭建

  • 安装依赖： npm i
  • 安装rollup： npm i -g rollup
  • 修改package.json总的dev脚本，添加sourcemap
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web- full-dev
  • 运行开发命令： npm run dev

目录结构说明

目录结构

目录结构2

项目运行入口文件

从pageage.json开始看起

入口文件

  • 根据package.json文件的dev配置项，找到 scripts/config.js 中的 web-full-dev
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

  '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
  },
  • web/entry-runtime-with-compiler.js是项目打包的入口文件，web是别名，找到真实路径。 resolve方法：
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)
  }
}
  • 打开scripts/alias.js, 找到web对应的路径：src/platforms/web
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')
}
  • 根据path.resolve(aliases[base], p.slice(base.length + 1))可以得出真实路径是：
src/platforms/web/entry-runtime-with-compiler.js

注意：此文件是带编译器的版本，是为了方便我们更清晰的了解整个Vue工作机制。在我们日常工作中使用的webpack是不带编译器的版本，而是通过额外注入的vue-loader实现的

new Vue()初始化过程

image

posted @ 2021-06-17 17:07  shine_lovely  阅读(80)  评论(0)  编辑  收藏  举报