VUE源码--目次构造（一）

2024年5月16日 104次阅读 来源: ZekiHoo

源码目次构造

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==

  1. compiler

compiler 目次包括 Vue.js 一切编译相干的代码。它包括把模板剖析成 ast 语法树，ast 语法树优化，代码天生等功用。

编译的事情能够在构建时做（借助 webpack、vue-loader 等辅佐插件）；也能够在运转时做，运用包括构建功用的 Vue.js。明显，编译是一项耗机能的事情，所以更引荐前者——离线编译。
  1. core
    core 目次包括了 Vue.js 的中心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、假造 DOM、东西函数等等。

    这里的代码可谓是 Vue.js 的魂魄，也是我们以后须要重点剖析的处所。

  2. platform
    Vue.js 是一个跨平台的 MVVM 框架，它能够跑在 web 上，也能够合营 weex 跑在 native 客户端上。platform 是 Vue.js 的进口，2 个目次代表 2 个重要进口，离别打包成运转在 web 上和 weex 上的 Vue.js。

    我们会重点剖析 web 进口打包后的 Vue.js，关于 weex 进口打包的 Vue.js，感兴趣的同砚能够自行研讨。

  3. server

    Vue.js 2.0 支撑了服务端衬着，一切服务端衬着相干的逻辑都在这个目次下。注重：这部份代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 等量齐观。

    服务端衬着重要的事情是把组件衬着为服务器端的 HTML 字符串，将它们直接发送到浏览器，末了将静态标记”夹杂”为客户端上完整交互的应用程序。

  4. sfc

    一般我们开辟 Vue.js 都邑借助 webpack 构建， 然后经由过程 .vue 单文件来编写组件。

    这个目次下的代码逻辑会把 .vue 文件内容剖析成一个 JavaScript 的对象。

  5. shared
    Vue.js 会定义一些东西要领，这里定义的东西要领都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所同享的。

援用: Vue.js 手艺揭秘.

    原文作者：ZekiHoo
    原文地址: https://segmentfault.com/a/1190000018690568
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞