VUE源码--目录结构(一)
源码目录结构
VUE 2.6.10 ├── scripts # 打包相关的配置文件,其中最重要的是config.js。主要是根据不同的入口,打 包为不同的文件。 ├── dist # 打包之后文件所在位置 ├── examples # demo示例 ├── flow # Vue使用了Flow来进行静态类型检查,这里定义了声明了一些静态类型 ├── packages # vue还可以分别生成其它的npm包 ├── src # 主要源码所在位置 ├── compiler # 编译相关 ├── codegen #根据ast生成render函数 ├── directives #通用生成render函数之前需要处理的指令 ├── parser #模板解析 ├── core # 核心代码 ├── components #全局的组件,这里只有keep-alive ├── global-api #全局方法,也就是添加在Vue对象上的方法,比如Vue.use,Vue.extend,,Vue.mixin等 ├── instance #实例相关内容,包括实例方法,生命周期,事件等 ├── observer #双向数据绑定相关文件 ├── util #工具方法 ├── vdom #虚拟dom相关 ├── platforms # 不同平台的支持 ├── web #web端独有文件 ├── compiler #编译阶段需要处理的指令和模块 ├── runtime #运行阶段需要处理的组件、指令和模块 ├── server #服务端渲染相关 ├── util #工具库 ├── weex #weex端独有文件 ├── server # 服务端渲染 ├── sfc # vue 文件解析 ├── shared # 共享工具代码 ├── test # 测试用例
==主要源码所在位置Src==
compiler
compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。
编译的工作可以在构建时做(借助 webpack、vue-loader 等辅助插件);也可以在运行时做,使用包含构建功能的 Vue.js。显然,编译是一项耗性能的工作,所以更推荐前者——离线编译。
core
core 目录包含了 Vue.js 的核心代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟 DOM、工具函数等等。这里的代码可谓是 Vue.js 的灵魂,也是我们之后需要重点分析的地方。
platform
Vue.js 是一个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex 跑在 native 客户端上。platform 是 Vue.js 的入口,2 个目录代表 2 个主要入口,分别打包成运行在 web 上和 weex 上的 Vue.js。我们会重点分析 web 入口打包后的 Vue.js,对于 weex 入口打包的 Vue.js,感兴趣的同学可以自行研究。
server
Vue.js 2.0 支持了服务端渲染,所有服务端渲染相关的逻辑都在这个目录下。注意:这部分代码是跑在服务端的 Node.js,不要和跑在浏览器端的 Vue.js 混为一谈。
服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。
sfc
通常我们开发 Vue.js 都会借助 webpack 构建, 然后通过 .vue 单文件来编写组件。
这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。
shared
Vue.js 会定义一些工具方法,这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。
引用: Vue.js 技术揭秘.
相关推荐
源码zanqunet 2020-10-28
anchongnanzi 2020-09-21
CRMCRMCRMDS 2020-08-12
Cricket 2020-07-27
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10