Vue源码剖析-目录结构功能划分

本文介绍Vue2项目目录结构功能划分，介绍了Vue2使用的类型约束和源码目录已经各个目录功能。

Vue源码地址 (opens new window)

Vue当前目录分析 (opens new window)

前情提要

• 源码中使用的 flow (opens new window) 代码类型检查

• 首先要了解Vue源码目录中各个文件夹的作用

• 源码目录(当前只分析src目录下的源码)

    src
      |- compiler      编译相关 将模板转换成render函数 render创建虚拟DOM `
      |- core          Vue 核心库`core和平台是无关的 是vue最核心的代码`
      |- platforms     平台相关代码`和平台相关的代码`
      |- server        SSR 服务端渲染`SSR服务端渲染相关代码`
      |- sfc           .vue 文件编译为 .js 文件`Single file component`
      |- shared        公共的代码`通用函数`
  

• compiler

  • 编译器

    将模板转换成render函数 render创建虚拟DOM 
  

• core

    core和平台是无关的
  

  • components

      keep-alive 组件
    

  • global-api

      vue 的静态方法
    

  • instance

      创建vue实例
    

  • observer

      响应式实现机制
    

  • util

      公共成员
    

  • vdom

      虚拟DOM
      增加了组件的机制
    

• platforms

  • 平台相关的
    • web
    • weex

• server

  • 服务端相关代码

• sfc

  • Single file component

      单文件组件
    

• shared

  • 公共的代码