深入解读vue源码(一)目录设计

基本介绍

此篇文章作为该专题的开篇,将会把vue的目录结构及作用进行简单的介绍,vue项目的github地址在vue

我们主要去介绍src下面的目录结构,因为src是源码的目录。


src

src目录是vue的源码目录,该目录下包含:

compiler(编译相关)

compiler包含vue所有编译相关的代码。包括将模版解析成ast语法树,以及对语法树的优化,代码自动生成等。

编译工作可以借助webpackvue-loader等工具。

codegen —— 用ast去生成render函数

directives —— 生成render函数之前需要处理的指令

parser —— 模板解析

core(核心业务代码)

core目录包含vue的核心代码,如内置组件、API、实例化、虚拟DOM、工具类函数等。

components —— 全局的组件,这里只有keep-alive

global-api —— 全局方法,也就是添加在Vue对象上的方法,比如Vue.use、Vue.extend、Vue.mixin等

instance —— 实例方法、生命周期、事件等

observer —— 双向数据绑定

util —— 工具

vdom —— 虚拟化DOM

platforms(终端支持)

vue是一个mvvm框架,能够运行在web上,也可以配合weex运行在客户端上。

platformsvue程序的入口,platforms具有两个入口,分别运行在web上和weex上。

compiler —— 编译阶段需要处理的指令和模块

runtime —— 运行阶段需要处理的指令和模块

server —— 服务端渲染

util —— 工具

server(服务端渲染)

从2.0版本开始,vue支持服务端的渲染方式,server目录下包含所有与服务端渲染相关的逻辑。

注:

  • 这部分代码是运行在node上的代码,不要和运行在浏览器的vue混淆
  • 服务端渲染是指服务器把组件以html字符串的形式发送到客户端
sfc(对vue文件的支持与解析)

通常我们开发项目都是通过webpack进行打包处理,通过编写vue文件实现功能。sfc目录下的代码能够去把vue文件解析成JavaScript对象。

shared(共享代码)

vue会定义一些方法,这些方法是会被客户端和服务端所共享的。


dist

vue项目打包后的文件存储区。


benchmarks

benchmarks的目的主要有两种,一是验证性能,另一个是获得一些基准数据,从而可以与本软件的其他版本或其他同类软件进行比较,通常不使用benchmarks做正确性验证。


flow

静态类型检查工具,此目录会规定一些参数和方法的类型。

vue本身使用了flow来进行静态类型检查。


examples

存放一些使用vue开发的应用案例。


packages

生成其他npm包。


test

测试用例。


scripts

Rollup构建时相关的配置文件。

------本文结束,感谢您的阅读,如有问题请通过邮件方式联系作者------