Vue 源碼分析—— 目錄結構


一,Vue.js 的源碼都是在src 目錄下,其目錄結構如下。

 

 

 

 

 1.compiler 目錄包含Vue.js 所有編譯相關的代碼。它包括把所有模板解析成ast 語法樹, ast 語法樹優化等功能。

 

 2.core 目錄 包含了Vue.js 的核心代碼,包括內置組件,全局API封裝,Vue 實例化,觀察者,虛擬DOM, 工具函數等等。

     (1) observer     相應系統,包含數據觀測的核心代碼。

     (2) vdom     包含虛擬DOM 創建(creation)和打補丁(patching) 的代碼

     (3) instance  包含Vue 構建函數設計相關的代碼

               (4) global-api   包含給Vue 構造函數掛在全局(靜態方法)或屬性的代碼

     (5)components  包含抽象出來的通用組件

 3.platform Vue.js 是一個跨平台的MVVM 框架,它可以跑在web上,可以跑在weex 跑在,native客戶端上,platform Vue.js 的入口,2 個目錄代表2主要入口,

  分別打包成運行在web 上和weex 上的Vue.js

 

   4.server  Vue.js 2.0 支持了服務端渲染,所有服務端渲染相關的邏輯都在這個目錄下,注意,這部部分代碼是跑在服務端的Node.js, 不要和跑

  在瀏覽器端的Vue.js 混為一談。

     (1)web    web 平台

        (1)entry-runtime.js     運行時構建的入口,不包含模板(template)到render 函數的編譯器,所不支持template 選項

            我們使用vue 默認導出的就是一個運行時的版本。

        (2)entry-runtime-with-compiler.js    獨立構建版本的入口,它在entry-runtime 的基礎上添加了模板(template) 到render 函數的編譯器

        (3)entry-compiler.js     vue-template-compiler 包的入口文件

        (4)entry-server-renderer.js     vue-server-renderer 包的入口文件

        (5)entry-server-basic-renderer.js     輸出  packages/vue-server-renderer/basic.js

    (2) weex    混合應用

   5.sfc  通常我們開發 Vue.js 都會借助 webpack 構建,然后通過.vue 單文件來編寫組件。

   6. shared  Vue.js 會定義歇一下工具方法,這里定義的工具方法都是會陪瀏覽器端的Vue.js 和 服務端的Vue.js 所共享的。

 二,配置文件

  (1)package.json           

  (2)yarn.lock   yarn 鎖定文件

  (3) .editorconfig   針對編輯器的編碼風格配置的文件

  (4) .flowconfig    flow 的配置文件

  (5).babelrc        babel 配置文件

  (6).eslintrc        eslint  配置文件

  (7).eslintignore        eslint  忽略文件

  (8).gitignore           git 忽略文件

三,test    包含所有測試文件

四,packages   存放獨立發布的包的目錄

五,flow   類聲明,檢查器

六 ,examples  存放一些使用Vue 開發的應用案例

七,dist      構建后文件的 輸入目錄

八,scripts     構建相關我文件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM