1. 程式人生 > >vue原始碼解讀(一)

vue原始碼解讀(一)

vue原始碼的目錄結構

vue原始碼根目錄下有很多資料夾,以下是各資料夾存放的檔案說明

Vue

    |— build 打包相關的配置檔案,其中最重要的是config.js。主要是根據不同的入口,打包為不同的檔案。

    |— dist 打包之後檔案所在位置

    |— examples 部分示例

    |— 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相關

        |— entries 入口檔案,也就是build資料夾下config.js中配置的入口檔案。看原始碼可以從這裡看起

        |— platforms 平臺相關的內容

            |— web web端獨有檔案

                |— compiler 編譯階段需要處理的指令和模組

                |— runtime 執行階段需要處理的元件、指令和模組

                |— server 服務端渲染相關

                |— util 工具庫

            |— weex weex端獨有檔案

        |— server 服務端渲染相關

    |— sfc

        |— parser.js 包含了單檔案 Vue 元件 (*.vue) 的解析邏輯。在 vue-template-compiler 包中被使用。

        |— shared 共享的工具方法

    |— test 測試用例