美文网首页
10分钟直达Vue源码起点

10分钟直达Vue源码起点

作者: JX灬君 | 来源:发表于2021-08-23 19:17 被阅读0次

Vue应用层面相对较简单,初级程序员也能根据官方文档开发出一个SPA项目。
但是在会用Vue之后,想要提高开发能力,看源码就是一个更好的选择了。

Vue源码

一. 下载地址:Vue版本v2.6.14
https://github.com/vuejs/vue/releases/tag/v2.6.14

二. 安装依赖
建议使用yarn安装,安装淘宝版yarnnpm i yarn tyarn -g
tyarn install

三. 启动项目
tyarn run dev

四. 找到Vue构造函数

    1. 了解package.json(scripts,devDependencies)
      先看scripts脚本
      然后浏览一下用到的一些依赖
    1. 我们运行的是dev,拿到执行脚本(两个信息:文件scripts/config.js, target:web-full-dev
      "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
    1. 进入脚本里的scripts/config.js,找到对应的入口文件:web/entry-runtime-with-compiler.js
// scripts/config.js line:132
'web-full-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.min.js'),
    format: 'umd',
    env: 'production',
    alias: { he: './entity-decoder' },
    banner
  },
    1. 打开根目录下.flowconfig文件,找到web映射的目录
      module.name_mapper='^web/\(.*\)$' -> '<PROJECT_ROOT>/src/platforms/web/\1'
    1. 打开文件web/entry-runtime-with-compiler.js,找到Vue引用
      import Vue from './runtime/index'
    1. 打开文件./runtime/index,找到Vue引用
      import Vue from 'core/index'
    1. 打开文件core/index,找到Vue引用
      import Vue from './instance/index'
    1. 打开文件./instance/index(Vue的起点)
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

五. Vue源码调试

    1. 修改examples/tree.index.html第24行
      <script src="../../dist/vue.min.js"></script>改成
      <script src="../../dist/vue.js"></script>
    1. 打印第一个调试信息,输出options
      在文件./instance/index第14行写入第一个调试代码console.log(options)
    1. 在浏览器打开examples/tree.index.html
      如果看到以下内容,那么恭喜你,开启你的Vue源码之旅吧。
      image.png

相关文章

网友评论

      本文标题:10分钟直达Vue源码起点

      本文链接:https://www.haomeiwen.com/subject/qtbliltx.html