作者：漂漂雪飘飘业_348 | 来源：互联网 | 2023-09-12 10:39
目录前言1代码结构1.1octotree插件1.2vue工程项目目录1.3主要代码目录srccompilercoreplatformsserversfcshared2下载代码并运
- 前言
-
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
├─flow
├─packages
├─scripts
├─src
├─test
└─types
1.3 主要代码目录src
vue.js主要实现逻辑都在src资源目录下，这里先对主要目录进行一个简单的描述。
├─compiler
│ ├─codegen
│ ├─directives
│ └─parser
├─core
│ ├─components
│ ├─global-api
│ ├─instance
│ │ └─render-helpers
│ ├─observer
│ ├─util
│ └─vdom
│ ├─helpers
│ └─modules
├─platforms
│ ├─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
│ ├─bundle-renderer
│ ├─optimizing-compiler
│ ├─template-renderer
│ └─webpack-plugin
├─sfc
└─shared
compiler
这个目录包含编译相关的代码，简单来说就是将 vue 的 template 字符串模板解析成 ast 抽象语法树，进而转换为 render 渲染函数。
core
这个目录包含vue的核心代码，封装了通用的全局组件、全局api、构造函数、响应式、工具方法，虚拟dom等。
platforms
这个目录包含跨端实现的相关代码，内部主要扩展了对weex的跨端开发的支持。里面的weex目录是对weex端的适配，web目录是对浏览器端的适配。
server
这个目录包含服务端渲染s-s-r实现的相关代码。
sfc
这个目录包含对vue单文件组件解析的相关代码，主要功能是将.vue 文件的内容解析成，符合单文件组件 (SFC) 规范的js描述对象。 https://vue-loader.vuejs.org/zh/spec.html vue-loader 文档中也有提到。
shared
这个目录包含一些公共配置项和方法。vue的web端和s-s-r服务端渲染都可以使用。
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目录，写一个简单的示例。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=">
<title>init demotitle>
<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
├─flow
├─packages
├─scripts
├─src
├─test
└─types
1.3 主要代码目录src
vue.js主要实现逻辑都在src资源目录下，这里先对主要目录进行一个简单的描述。
├─compiler
│ ├─codegen
│ ├─directives
│ └─parser
├─core
│ ├─components
│ ├─global-api
│ ├─instance
│ │ └─render-helpers
│ ├─observer
│ ├─util
│ └─vdom
│ ├─helpers
│ └─modules
├─platforms
│ ├─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
│ ├─bundle-renderer
│ ├─optimizing-compiler
│ ├─template-renderer
│ └─webpack-plugin
├─sfc
└─shared
compiler
这个目录包含编译相关的代码，简单来说就是将 vue 的 template 字符串模板解析成 ast 抽象语法树，进而转换为 render 渲染函数。
core
这个目录包含vue的核心代码，封装了通用的全局组件、全局api、构造函数、响应式、工具方法，虚拟dom等。
platforms
这个目录包含跨端实现的相关代码，内部主要扩展了对weex的跨端开发的支持。里面的weex目录是对weex端的适配，web目录是对浏览器端的适配。
server
这个目录包含服务端渲染s-s-r实现的相关代码。
sfc
这个目录包含对vue单文件组件解析的相关代码，主要功能是将.vue 文件的内容解析成，符合单文件组件 (SFC) 规范的js描述对象。 https://vue-loader.vuejs.org/zh/spec.html vue-loader 文档中也有提到。
shared
这个目录包含一些公共配置项和方法。vue的web端和s-s-r服务端渲染都可以使用。
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目录，写一个简单的示例。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=">
<title>init demotitle>
<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://img8.php1.cn/3cdc5/24912/711/b6574f3292f9dc00.png)
京公网安备 11010802041100号