VUE源码解析-1- 初始篇:vue定义路径查找

从这里开始,记录VUE源码分析。

1. 将 vue 源码拉到本地,方便分析

vue 源码地址来自 全球最大同性交流网站-- gitHub:https://github.com/vuejs/vue

我们将 dev 分支代码克隆到本地

cd 到本地存放目录:

cd 你的本地存放目录

git clone 将代码clone下来 

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

⚠️ 如果想直接在github查看,可安装一个插件 Octotree ,可在github左侧生成一个 侧边导航,方便查看

2. clone源码之后,正式开始

首先,vue运行的时候,咱们通常是运行 npm run dev,到底vue是怎么运行起来的,咱们就从npm run dev入手。

打开 1.package.json,找到 scripts -> dev设置:

可以看到,这是rollup 启动了 "scripts/config.js" 中的 “web-full-dev”,咱们打开这个文件 2.vue/scripts/config.js,找到 web-full-dev

上边咱们可以看到,入口entry是 “web/entry-runtime-with-compiler.js”文件,咱们找到 3. src/platforms/web/entry-runtime-with-compiler.js

发现,Vue 是import进来的,再去找到 4. src/platforms/web//runtime/index 

发现 vue 还是import出来的,再去找到 5. src/core/index

害,还是引入,再去找到 6. src/core/instance/index 

哇哦,终于找到了 Vue出生的地方,它是一个函数。

总结:Vue 的定义地址:src/core/instance/index.js

猜你喜欢

转载自blog.csdn.net/RedaTao/article/details/109640055