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所共享的。

原文地址：https://www.cnblogs.com/tugenhua0707/p/11756575.html

时间： 2024-10-08 08:47:26

vue系列文章 --- 源码目录结构整理（三）的相关文章

chromium浏览器开发系列第三篇：chromium源码目录结构

上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠自己.官网只能作为一个参考. Chromium结构相对两年前变化很大.目录结构依然很清晰,主要有三个部分(不包括其他的库):浏览器,渲染器,webkit.浏览器是主要的进程,代表所有的UI和I / O.渲染通常是每个tab页的子过程,是由浏览器驱动.Webkit做布局和渲染. 简单介绍解决方案文件:

Swift的源码目录结构 其中proxy是前端的业务接入进程

Swift的源码目录结构.其中proxy是前端的业务接入进程.account.container和object目录分别是账户.容器 和对象的业务处理逻辑进程.common目录是一些通用工具代码.common中比较重要的有:哈希环的处理逻辑.接下来会依次介绍各个进程的源码逻辑和 一些关键点机制. 各个业务进程或模块之间的逻辑关系可以参考文中的架构图. 二.Proxy进程的业务处理 首先需要掌握基于PasteDeploy的堆栈式WSGI架构.根据PasteDeploy定义的各个层,可以很快理清配置文

Mysql源码目录结构

Programs for handling SQL commands. The "core" of MySQL. These are the .c and .cc files in the sql directory: derror.cc --- read language-dependent message file des_key_file.cc --- load DES keys from plaintext file discover.cc --- Functions for

转：《Linux设备驱动程序3》源码目录结构和源码分析经典链接

转自:http://blog.csdn.net/geng823/article/details/37567557 [原创][专栏]<Linux设备驱动程序>--- LDD3源码目录结构和源码分析经典链接 [专栏]Linux设备驱动程序学习(总目录) [专栏]LDD3源码分析链接(总目录) 1. LDD3源码分析之hello.c与Makefile模板 2. LDD3源码分析之字符设备驱动程序 其他错误: 我的Linux内核为 3.2.0-65-generic-pae,在scull目录下make时

跟厂长学PHP内核（三）：源码目录结构

上篇文章我们已经介绍了源码分析工具的安装.配置以及调试方法,本文我们来讲述一下PHP源码的目录结构. 一.目录概览 以php-7.0.12为例,看过源码的同学们应该发现源码目录多达十多个,下面是每个目录的说明. 目录 说明 TSRM 线程相关安全的实现 Zend PHP解析器的核心实现 build linux下编译相关的目录 ext PHP的扩展 main PHP的主要代码 netware 网络目录,socket的定义与实现 pear PHP扩展及应用的代码仓库 sapi PHP的应用层接口 s

透过现象看本质——回头再看Nginx（进程模型、异步非阻塞、源码目录结构）

透过现象看本质--回头再看Nginx Nginx的进程模型 ? 使用过nginx的朋友都知道nginx的性能很高,而其原因可能少有人知.首先,nginx的架构就奠定了其高性能的基础.那么就先来看看nginx的基础架构吧,如下图所示:(不能完全理清楚所有内容也没关系,因为本小节讲述的主要内容是Nginx的进程模型) ? 本小节先来说说Nginx基础架构中的进程模型: ? 所谓进程模型,即Nginx响应请求或服务时程序运行(机器执行指令集)的方式,一般在nginx服务启动后,在Unix系统中会以da

postgres源码目录结构

1.第一级目录介绍 |_postgres |_aclocal.m4------------config用的文件的一部分 |_config----------------config文件目录 |_configure-------------configure文件 |_contrib---------------contribution程序 |_COPYRIGHT----------版权信息 |_doc------------------文档目录 |_GNUmakefile.in-------mak

2.15.1.linux内核源码目录结构1

2.15.1.1.源码从哪里来 (1)之前讲过,我们使用2.6.35.7版本的内核.这个版本的内核有三种:第一种是kernel.org上的官方版本,第二种是三星移植过的,第三种是九鼎X210的移植版本.我们讲课时使用第三种内核来讲解,后面的移植实验使用第二种内核来移植. (2)源码在开发板光盘中有.可以自己去linux下解压然后make distclean清理然后再次打包传输到windows下去解压分析:也可以直接去我网盘中下载我打包好的. (3)解压后最终在windows下得到了一个kerne

Android 5.1.1 源码目录结构

最近公司培训新同事,我负责整理一点关于android的基础知识,遥想当年,刚接触android,也是一头雾水, 啥都不懂,就是靠看文档和视频,对android有一个初步了解,然后就通过查看源码,才有更深入的了解. android有成千上万,说太少了,是成百万上亿的代码,当然要全部都了解是不可能的,所以要有一套自己的 方法来理解和查看代码.学习android,对代码框架结构的了解是必不可少的,其实现在6.0的代码都已经出来了, 但是上网查了下,没人写过5.1的代码结构,我在这里来补充下: 先看下截