【Vue2深度学习】起步篇

240 阅读2分钟

源码获取

源码地址:github.com/vuejs/vue

源码结构

1.vue.js主要实现逻辑都在src资源目录下,具体如下:

  ├─compiler        ## 编译器,将 template 编译成 render 函数
  ├─core            ## vue.js核心代码,封装了通用的全局组件、全局api、构造函数、响应式、工具方法,虚拟dom等。
  ├─platforms      ## vue.js 对web端和weex端的分别支持
  ├─server         ## 服务端渲染ssr相关
  ├─sfc            ## .vue单文件组件解析相关
  └─shared         ##  web端和服务端渲染的公用的工具函数

2.其他的文件夹

.circleci:包含 CircleCI 持续集成/持续部署工具的配置文件;
.github:项目相关的说明文档;
benchmarks:基准,性能测试文件;
dist:构建后文件的输入目录;
examples:存放一些使用Vue 开发的应用案例;
flow:类声明、检查器;
packages:存放独立发布的包的目录;
scripts:存放 npm 脚本配置文件;
test:包含所有测试文件;
types:vue 新版本支持 TypeScript,主要是 TypeScript 类型声明文件;
node_modules:npm 包存放目录;

3.配置文件

.babelrc:babel 配置;
.editorconfig:文本编码样式配置文件;
.eslintignore:eslint 校验忽略文件
.eslintrc:eslint 配置文件;
.flowconfig:flow 配置文件;
.gitignore:Git 提交忽略文件配置;
BACKERS.md:赞助者信息文件;
LICENSE:项目开源协议;
package.json:依赖;
README.md :说明文件;
yarn.lock :yarn 版本锁定文件;

源码调试

1.在package.json文件中,添加 --sourcemap 编译选项,生成 sourcemap,如下图:

image-20220407210103816.png

  1. 在examples文件夹中,选择一个index.html文件,将.min删除,引用没有压缩过的 vue.js,方便看源码

image-20220407205950490.png

  1. 在谷歌浏览器中打开该index.html文件,然后打开 chrome 开发者工具中的 source 标签,设置断点来调试。下图的 src 就是开启了sourcemap 后出现的。

image-20220407211318165.png

入口文件

1.分析 package.json,查找入口文件目录

image-20220407212120592.png

2.根据上图红框1,查找 scripts 文件下的 config.js,再根据上图红框2,在 scripts/config.js 中查找 web-full-dev

image-20220407212857036.png

3.根据上图红框3,找到resove方法

image-20220407213625941.png

4.再根据上图红框4,找到script/alias文件

image-20220407213839187.png

5.综合上图红框3和红框5,得知源码的入口文件目录是src/platforms/web/entry-runtime-with-compiler.js