Vue.js源码解析:Vue.js 源码目录设计

Vue.js源码版本:2.6
Vue.js源码地址:https://github.com/vuejs/vue/tree/2.6

Vue.js 的源码都在 src ⽬录下,其⽬录结构如下。

src
├── compiler # 编译相关
├── core # 核⼼代码
├── platforms # 不同平台的⽀持
├── server # 服务端渲染
├── sfc # .vue ⽂件解析
├── shared # 共享代码

如图所示:
在这里插入图片描述

compiler

compiler ⽬录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树,ast 语法树优化,代码⽣成等功能。

core

core ⽬录包含了 Vue.js 的核⼼代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟
DOM、⼯具函数等等。

这⾥的代码可谓是 Vue.js 的灵魂,也是我们之后需要重点分析的地⽅。

platform

Vue.js 是⼀个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex 跑在 natvie 客户端上。
platform 是 Vue.js 的⼊⼝,2 个⽬录代表 2 个主要⼊⼝,分别打包成运⾏在 web 上和 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 所共享
的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值