vue系列文章 --- 源码目录结构整理(三)
vue的版本是:^2.6.10
结构如下:
|----- vue
| |--- dist # 打包之后的目录vue文件
| | |--- vue.common.dev.js
| | |--- vue.common.js
| | |--- vue.common.prod.js
| | |--- vue.esm.browser.js
| | |--- vue.esm.browser.min.js
| | |--- vue.esm.js
| | |--- vue.js
| | |--- vue.min.js
| | |--- vue.runtime.common.dev.js
| | |--- vue.runtime.common.js
| | |--- vue.rintime.common.prod.js
| | |--- vue.runtime.esm.js
| | |--- vue.runtime.js
| | |--- vue.runtime.min.js
| |--- src
| | |--- compiler # 模板解析相关的文件
| | | |--- codegen # 根据Ast 生成 render 函数
| | | | |--- events.js
| | | | |--- index.js
| | | |--- directives # 生成 render 函数之前需要处理的指令
| | | | |--- bind.js
| | | | |--- index.js
| | | | |--- model.js
| | | | |--- on.js
| | | |--- parser # 模板解析
| | | | |--- entity-decoder.js
| | | | |--- filter-parser.js
| | | | |--- html-parser.js
| | | | |--- index.js
| | | | |--- text-parser.js
| | | |--- codeframe.js
| | | |--- create-compiler.js
| | | |--- error-detector.js
| | | |--- helpers.js
| | | |--- index.js
| | | |--- optimizer.js
| | | |--- to-function.js
| | |---- core
| | | |--- components # 全局组件 目前只有 keep-alive
| | | | |--- index.js
| | | | |--- keep-alive.js
| | | |--- global-api # 全局方法 添加到vue上的方法
| | | | |--- assets.js
| | | | |--- extends.js
| | | | |--- index.js
| | | | |--- mixin.js
| | | | |--- use.js
| | | |--- instance # 实列相关的内容 包括实列方法。生命周期,事件等。
| | | | |--- render-helpers
| | | | | |--- bind-dynamic-keys.js
| | | | | |--- bind-object-listeners.js
| | | | | |--- bind-object-props.js
| | | | | |--- check-keycodes.js
| | | | | |--- index.js
| | | | | |--- render-list.js
| | | | | |--- render-slot.js
| | | | | |--- render-static.js
| | | | | |--- resolve-filter.js
| | | | | |--- resolve-scoped-slots.js
| | | | | |--- resolve-slots.js
| | | | |--- events.js
| | | | |--- index.js
| | | | |--- init.js
| | | | |--- inject.js
| | | | |--- lifecycle.js
| | | | |--- proxy.js
| | | | |--- render.js
| | | | |--- state.js
| | | |--- observer # 数据双向绑定文件
| | | | |--- array.js
| | | | |--- dep.js
| | | | |--- index.js
| | | | |--- scheduler.js
| | | | |--- traverse.js
| | | | |--- watcher.js
| | | |--- util # 工具方法
| | | | |--- debug.js
| | | | |--- env.js
| | | | |--- error.js
| | | | |--- index.js
| | | | |--- lang.js
| | | | |--- next-tick.js
| | | | |--- options.js
| | | | |--- perf.js
| | | | |--- props.js
| | | |--- vdom # 虚拟dom相关的
| | | | |--- helpers
| | | | | |--- extract-props.js
| | | | | |--- get-first-component-child.js
| | | | | |--- index.js
| | | | | |--- is-async-placeholder.js
| | | | | |--- merge-hook.js
| | | | | |--- normalize-children.js
| | | | | |--- normalize-scoped-slots.js
| | | | | |--- resolve-async-component.js
| | | | | |--- update-listeners.js
| | | | |--- modules
| | | | | |--- directives.js
| | | | | |--- index.js
| | | | | |--- ref.js
| | | | |--- create-component.js
| | | | |--- create-element.js
| | | | |--- create-functional-component.js
| | | | |--- patch.js
| | | | |--- vnode.js
| | | |--- config.js # 入口配置文件
| | | |--- index.js
| | |--- platforms # 平台相关的
| | | |--- web # web平台
| | | | |--- compiler # 编译期间需要处理的指令和模块
| | | | | |--- directives # 指令
| | | | | | |--- html.js
| | | | | | |--- index.js
| | | | | | |--- model.js
| | | | | | |--- text.js
| | | | | |--- modules # 模块
| | | | | | |--- class.js
| | | | | | |--- index.js
| | | | | | |--- model.js
| | | | | | |--- style.js
| | | | | |--- index.js
| | | | | |--- options.js
| | | | | |--- util.js
| | | | |--- runtime # 运行阶段处理的组件、指令和模块
| | | | | |--- components # 相关的组件
| | | | | | |--- index.js
| | | | | | |--- transition-group.js
| | | | | | |--- transition.js
| | | | | |--- directives # 相关的指令
| | | | | | |--- index.js
| | | | | | |--- model.js
| | | | | | |--- show.js
| | | | | |--- modules # 相关的模块
| | | | | | |--- attrs.js
| | | | | | |--- class.js
| | | | | | |--- dom-props.js
| | | | | | |--- events.js
| | | | | | |--- index.js
| | | | | | |--- style.js
| | | | | | |--- transition.js
| | | | | |--- class-util.js
| | | | | |--- index.js
| | | | | |--- node-ops.js
| | | | | |--- patch.js
| | | | | |--- transition-util.js
| | | | |--- server # 服务端渲染的指令和模块
| | | | | |--- directives # 指令
| | | | | | |--- index.js
| | | | | | |--- model.js
| | | | | | |--- show.js
| | | | | |--- modules # 模块
| | | | | | |--- attrs.js
| | | | | | |--- class.js
| | | | | | |--- dom-props.js
| | | | | | |--- index.js
| | | | | | |--- style.js
| | | | | |--- compiler.js
| | | | | |--- util.js
| | | | |--- util
| | | | | |--- attrs.js
| | | | | |--- class.js
| | | | | |--- compat.js
| | | | | |--- element.js
| | | | | |--- index.js
| | | | | |--- style.js
| | | | |--- entry-compiler.js
| | | | |--- entry-runtime-with-compiler.js
| | | | |--- entry-runtime.js
| | | | |--- entry-server-basic-renderer.js
| | | | |--- entry-server-renderer.js
| | | |--- weex # weex平台
| | |--- server
| | | |--- bundle-renderer
| | | | |--- create-bundle-renderer.js
| | | | |--- create-bundle-runner.js
| | | | |--- source-map-support.js
| | | |--- optimizing-compiler
| | | | |--- codegen.js
| | | | |--- index.js
| | | | |--- modules.js
| | | | |--- optimizer.js
| | | | |--- runtime-helpers.js
| | | |--- template-renderer
| | | | |--- create-async-file-mapper.js
| | | | |--- index.js
| | | | |--- parse-template.js
| | | | |--- template-stream.js
| | | |--- webpack-plugin
| | | | |--- client.js
| | | | |--- server.js
| | | | |--- util.js
| | | |--- create-basic-renderer.js
| | | |--- create-renderer.js
| | | |--- render-context.js
| | | |--- render-stream.js
| | | |--- render.js
| | | |--- util.js
| | | |--- write.js
| | |--- sfc
| | | |--- parser.js
| | |--- shared
| | | |--- constants.js
| | | |--- util.js
| |
| |--- types
| | |--- index.d.ts
| | |--- options.d.ts
| | |--- plugin.d.ts
| | |--- vnode.d.ts
| | |--- vue.d.ts
| |--- package.json
| |--- README.md
如上是 vue2.6.10版本所有的js目录结构
1. src/compiler: 该目录包含Vue.js所有编译相关的代码,包括把模板解析成AST语法树、及 AST语法树优化、代码生成等功能。
src/compiler/codegen: 把AST转换成Render函数。
src/compiler/parser: 解析模板成AST。
src/compiler/directives: 生成 Render 函数之前需要处理的指令。
2. src/core: 该目录包含了Vue.js的核心代码,包括内置组件、全局API封装、Vue实列化、观察者、虚拟DOM、工具函数等。
src/core/components: 组件相关的属性,目前这里只有keep-alive组件
src/core/global-api: Vue的全局api, 比如 Vue.extend、Vue.mixin.
src/core/instance: 实例化相关的。比如 生命周期、事件等。
src/core/observer: Vue响应式数据相关的目录。
src/core/util: Vue相关的工具方法目录。
src/core/vdom: 虚拟dom相关的内容。
3. src/platforms: platforms 是Vue.js的入口文件,有2个入口文件 web 和 weex,分别打包运行在 web或 weex 平台上的。
src/platforms/web 平台上的(src/platforms/weex 也是一样的意思)。
src/platforms/web/compiler: web端编译器相关的代码,用来编译模板成Render函数。
src/platforms/web/runtime: web端运行时相关的代码,用来创建Vue实列等操作。
src/platforms/web/util: 相关工具类。
src/platforms/web/server: 服务器端渲染相关的。
4. src/server: Vue2.0+ 为了支持服务器端渲染,所有服务器端渲染相关的逻辑都放在这个目录下。
5. src/sfc: 该目录下的代码逻辑会把 .vue 文件内容解析成一个 javascript 的对象。
src/sfc/parser.js: 转换单文件组件(*.vue) 解析成一个javascript对象。
6. src/shared: 该目录下会定义一些工具方法。这些工具方法会被浏览器端 Vue.js 和 服务器端 Vue.js所共享的。
vue系列文章 --- 源码目录结构整理(三)的更多相关文章
- Vue2.x源码学习笔记-源码目录结构整理
先从github上下载或者clone一个vue分支项目 https://github.com/vuejs/vue 查看下目录结果 先列出一些目录 Vue |— build 打包相关的配置文件,其中最重 ...
- chromium浏览器开发系列第三篇:chromium源码目录结构
上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠 ...
- Linux基础系列—Linux内核源码目录结构
/** ****************************************************************************** * @author 暴走的小 ...
- 【安卓本卓】Android系统源码篇之(一)源码获取、源码目录结构及源码阅读工具简介
前言 古人常说,“熟读唐诗三百首,不会作诗也会吟”,说明了大量阅读诗歌名篇对学习作诗有非常大的帮助.做开发也一样,Android源码是全世界最优秀的Android工程师编写的代码,也是A ...
- Locust源码目录结构及模块作用
Locust源码目录结构及模块作用如下: 参考文章:https://blog.csdn.net/biheyu828/article/details/84031942
- InfluxDB源码目录结构解析
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 influxdata主目录结构 [root@localhost ...
- (转)android系统架构及源码目录结构
转自:http://blog.csdn.net/finewind/article/details/46324507 1. Android系统架构: android系统架构采用了分层架构的思想,如下图所 ...
- (3.1)mysql基础深入——mysql二进制与源码目录结构介绍
(3.1)mysql基础深入——mysql二进制与源码目录结构介绍 关键字:二进制目录结构,源码目录结构(编译安装目录结构) 1.二进制安装程序目录结构 [1] BIN -- mysql的可执行文件( ...
- Source Code Structure - Python 源码目录结构
Source Code Structure - Python 源码目录结构 Include 目录包含了 Python 提供的所有头文件, 如果用户需要用 C 或 C++ 编写自定义模块扩展 Pytho ...
随机推荐
- librosa语音信号处理
librosa是一个非常强大的python语音信号处理的第三方库,本文参考的是librosa的官方文档,本文主要总结了一些重要,对我来说非常常用的功能.学会librosa后再也不用用python去实现 ...
- [DE] Pipeline for Data Engineering
How to build an ML pipeline for Data Science 垃圾信息分类 Ref:Develop a NLP Model in Python & Deploy I ...
- C++基础之泛型算法
标准库并未给每个容器添加大量功能,因此,通过大量泛型算法,来弥补.这些算法大多数独立于任何特定的容器,且是通用的,可用于不同类型的容器和不同的元素. 迭代器使得算法不依赖容器,但是算法依赖于元素的类型 ...
- vue把链接转二维码
使用qrcodejs2插件 1. 安装qrcodejs2:npm install qrcodejs2 --save 2. 在组件里面引入: import QRCode from 'qrcodejs2' ...
- [python]python的异常处理
异常处理:首先了解异常,程序出现逻辑错误或者用户输入不合法都会引发异常,而这些异常并不是致命的所以不会导致程序崩溃死掉.可以利用Python提供的异常处理机制在异常出现时及时捕获,并从内部自我消化. ...
- [python]兔子问题,斐波那契数列 递归&非递归
假设一对幼年兔子需要一个月长成成年兔子,一对成年兔子一个月后每个月都可以繁衍出一对新的幼年兔子(即兔子诞生两个月后开始繁殖).不考虑死亡的情况,问第 N 个月时共有多少对兔子? 结果前几个月的兔子数量 ...
- Nginx安装教程,ubuntu18.04
本文介绍Nginx如何安装,操作系统为Ubuntu 18.04. 一.安装 (1)安装git 执行命令:“sudo apt-get install git”. (2)安装aptitude 执行命令 ...
- Spring boot 官网学习笔记 - 开发第一个Spring boot web应用程序(使用mvn执行、使用jar执行)
Creating the POM <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...
- 对于java的Sting.intern()的一些注意
今天翻看书时遇到了这样一个问题,对于String.intern()方法又有了一些认识和看法.首先我们看它的api 大意就是intern()方法会在常量池中记录首次出现的实例引用,但是在jdk1.6中却 ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...