Vue源码解析-源码目录及源码调试运行
目录
- 前言
1 代码结构
- 1.1 octotree插件
- 1.2 vue工程项目目录
1.3 主要代码目录src
- compiler
- core
- platforms
- server
- sfc
- shared
2 下载代码并运行构建
- 2.1 源代码下载
- 2.2 打开项目安装依赖
- 2.3 package.json 的 scripts 配置中添加 --sourcemap
- 3 编写demo进行调试
记住框架的api是能让我们熟练的使用框架，但优秀的施工人员和优秀的设计师，两者还是有本质的区别。框架的api是如何实现的，如果是我们通过源码调试找到的答案，相信一定会让自己印象深刻。学习源码的工程化编码风格，理解用到的设计模式，算法等，想必对自己的成长大有裨益。
1 代码结构
1.1 octotree插件
给大家安利一个github上看代码的小插件，octotree，https://www.octotree.io。可以看到vue2版本的项目结构如下图。
1.2 vue工程项目目录
可以在控制台中运行tree命令，将目录成树状打印。
├─.circleci ├─.github
├─benchmarks
├─dist ## 发布的目标目录
├─examples ## vue相关的使用举例
├─flow ## 针对flow的类型声明
├─packages ## core核心代码之外的其他一些功能包
├─scripts ## 项目构建脚本
├─src ## vue主要源码
├─test ## 对于vue相关api单元测试以及使用举例的端对端测试等
└─types ## TypeScript类型声明
1.3 主要代码目录src
vue.js主要实现逻辑都在src资源目录下，这里先对主要目录进行一个简单的描述。
├─compiler ## 编译生成render函数相关 │ ├─codegen
│ ├─directives
│ └─parser
├─core ## vue.js核心代码，实例化、响应式等
│ ├─components
│ ├─global-api
│ ├─instance
│ │ └─render-helpers
│ ├─observer
│ ├─util
│ └─vdom
│ ├─helpers
│ └─modules
├─platforms ## vue.js 对web端和weex端的分别支持
│ ├─web
│ │ ├─compiler
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─runtime
│ │ │ ├─components
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─server
│ │ │ ├─directives
│ │ │ └─modules
│ │ └─util
│ └─weex
│ ├─compiler
│ │ ├─directives
│ │ └─modules
│ │ └─recycle-list
│ ├─runtime
│ │ ├─components
│ │ ├─directives
│ │ ├─modules
│ │ └─recycle-list
│ └─util
├─server ## 服务端渲染ssr相关
│ ├─bundle-renderer
│ ├─optimizing-compiler
│ ├─template-renderer
│ └─webpack-plugin
├─sfc ## .vue单文件组件解析相关
└─shared ## web端和服务端渲染的公共代码
compiler
这个目录包含编译相关的代码，简单来说就是将 vue 的 template 字符串模板解析成 ast 抽象语法树，进而转换为 render 渲染函数。
core
这个目录包含vue的核心代码，封装了通用的全局组件、全局api、构造函数、响应式、工具方法，虚拟dom等。
platforms
这个目录包含跨端实现的相关代码，内部主要扩展了对weex的跨端开发的支持。里面的weex目录是对weex端的适配，web目录是对浏览器端的适配。
server
这个目录包含服务端渲染ssr实现的相关代码。
sfc
这个目录包含对vue单文件组件解析的相关代码，主要功能是将.vue 文件的内容解析成，符合单文件组件 (SFC) 规范的js描述对象。 https://vue-loader.vuejs.org/zh/spec.html vue-loader 文档中也有提到。
shared
这个目录包含一些公共配置项和方法。vue的web端和ssr服务端渲染都可以使用。
2 下载代码并运行构建
这里主要先对 vue 的2版本的源码进行分析，vue-next 3版本新特性会在后续文章中进行分析，如基于proxy实现的数据响应式，虚拟dom等。
2.1 源代码下载
这里选择2版本中最新的2.6.12版本进行下载。
2.2 打开项目安装依赖
用 npm i 或者 yarn add all 进行依赖包的安装。
2.3 package.json 的 scripts 配置中添加 --sourcemap
添加 --sourcemap，运行npm run dev 或者 yarn dev 生成带编译器版本的vue.js和其对应的.map 文件。我们在编写demo调试的时候，引用dist/vue.js文件，通过vue.js.map，在浏览器中调试，就能关联到对应的源码文件。如图所示。
3 编写demo进行调试
在源码项目中创建自己的demo目录，写一个简单的示例。
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>init demo</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<div id="app">{{title}}</div>
<script>
new Vue({
data: {
title: "vue调试"
}
}).$mount("#app");
</script>
</body>
</html>
断点调试的时候，你就能看到 sidebar 中对应的源码src目录。
ctrl + p 可以搜索指定的源码文件
出处：https://www.cnblogs.com/elmluo/p/14738295.html
目录
- 前言
1 代码结构
- 1.1 octotree插件
- 1.2 vue工程项目目录
1.3 主要代码目录src
- compiler
- core
- platforms
- server
- sfc
- shared
2 下载代码并运行构建
- 2.1 源代码下载
- 2.2 打开项目安装依赖
- 2.3 package.json 的 scripts 配置中添加 --sourcemap
- 3 编写demo进行调试
记住框架的api是能让我们熟练的使用框架，但优秀的施工人员和优秀的设计师，两者还是有本质的区别。框架的api是如何实现的，如果是我们通过源码调试找到的答案，相信一定会让自己印象深刻。学习源码的工程化编码风格，理解用到的设计模式，算法等，想必对自己的成长大有裨益。
1 代码结构
1.1 octotree插件
给大家安利一个github上看代码的小插件，octotree，https://www.octotree.io。可以看到vue2版本的项目结构如下图。
1.2 vue工程项目目录
可以在控制台中运行tree命令，将目录成树状打印。
├─.circleci ├─.github
├─benchmarks
├─dist ## 发布的目标目录
├─examples ## vue相关的使用举例
├─flow ## 针对flow的类型声明
├─packages ## core核心代码之外的其他一些功能包
├─scripts ## 项目构建脚本
├─src ## vue主要源码
├─test ## 对于vue相关api单元测试以及使用举例的端对端测试等
└─types ## TypeScript类型声明
1.3 主要代码目录src
vue.js主要实现逻辑都在src资源目录下，这里先对主要目录进行一个简单的描述。
├─compiler ## 编译生成render函数相关 │ ├─codegen
│ ├─directives
│ └─parser
├─core ## vue.js核心代码，实例化、响应式等
│ ├─components
│ ├─global-api
│ ├─instance
│ │ └─render-helpers
│ ├─observer
│ ├─util
│ └─vdom
│ ├─helpers
│ └─modules
├─platforms ## vue.js 对web端和weex端的分别支持
│ ├─web
│ │ ├─compiler
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─runtime
│ │ │ ├─components
│ │ │ ├─directives
│ │ │ └─modules
│ │ ├─server
│ │ │ ├─directives
│ │ │ └─modules
│ │ └─util
│ └─weex
│ ├─compiler
│ │ ├─directives
│ │ └─modules
│ │ └─recycle-list
│ ├─runtime
│ │ ├─components
│ │ ├─directives
│ │ ├─modules
│ │ └─recycle-list
│ └─util
├─server ## 服务端渲染ssr相关
│ ├─bundle-renderer
│ ├─optimizing-compiler
│ ├─template-renderer
│ └─webpack-plugin
├─sfc ## .vue单文件组件解析相关
└─shared ## web端和服务端渲染的公共代码
compiler
这个目录包含编译相关的代码，简单来说就是将 vue 的 template 字符串模板解析成 ast 抽象语法树，进而转换为 render 渲染函数。
core
这个目录包含vue的核心代码，封装了通用的全局组件、全局api、构造函数、响应式、工具方法，虚拟dom等。
platforms
这个目录包含跨端实现的相关代码，内部主要扩展了对weex的跨端开发的支持。里面的weex目录是对weex端的适配，web目录是对浏览器端的适配。
server
这个目录包含服务端渲染ssr实现的相关代码。
sfc
这个目录包含对vue单文件组件解析的相关代码，主要功能是将.vue 文件的内容解析成，符合单文件组件 (SFC) 规范的js描述对象。 https://vue-loader.vuejs.org/zh/spec.html vue-loader 文档中也有提到。
shared
这个目录包含一些公共配置项和方法。vue的web端和ssr服务端渲染都可以使用。
2 下载代码并运行构建
这里主要先对 vue 的2版本的源码进行分析，vue-next 3版本新特性会在后续文章中进行分析，如基于proxy实现的数据响应式，虚拟dom等。
2.1 源代码下载
这里选择2版本中最新的2.6.12版本进行下载。
2.2 打开项目安装依赖
用 npm i 或者 yarn add all 进行依赖包的安装。
2.3 package.json 的 scripts 配置中添加 --sourcemap
添加 --sourcemap，运行npm run dev 或者 yarn dev 生成带编译器版本的vue.js和其对应的.map 文件。我们在编写demo调试的时候，引用dist/vue.js文件，通过vue.js.map，在浏览器中调试，就能关联到对应的源码文件。如图所示。
3 编写demo进行调试
在源码项目中创建自己的demo目录，写一个简单的示例。
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>init demo</title>
<script src="../dist/vue.js"></script>
</head>
<body>
<div id="app">{{title}}</div>
<script>
new Vue({
data: {
title: "vue调试"
}
}).$mount("#app");
</script>
</body>
</html>
断点调试的时候，你就能看到 sidebar 中对应的源码src目录。
ctrl + p 可以搜索指定的源码文件
以上是 Vue源码解析-源码目录及源码调试运行 的全部内容， 来源链接： utcz.com/z/380193.html
