VUE源碼--目錄結構（一）

tuniutech 發布于2019-08-23 16:31 / 591人閱讀

摘要：源碼目錄結構打包相關的配置文件，其中最重要的是。主要是根據不同的入口，打包為不同的文件。這個目錄下的代碼邏輯會把文件內容解析成一個的對象。

源碼目錄結構

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

compiler

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

編譯的工作可以在構建時做（借助 webpack、vue-loader 等輔助插件）；也可以在運行時做，使用包含構建功能的 Vue.js。顯然，編譯是一項耗性能的工作，所以更推薦前者——離線編譯。

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

這里的代碼可謂是 Vue.js 的靈魂，也是我們之后需要重點分析的地方。

platform
Vue.js 是一個跨平臺的 MVVM 框架，它可以跑在 web 上，也可以配合 weex 跑在 native 客戶端上。platform 是 Vue.js 的入口，2 個目錄代表 2 個主要入口，分別打包成運行在 web 上和 weex 上的 Vue.js。

我們會重點分析 web 入口打包后的 Vue.js，對于 weex 入口打包的 Vue.js，感興趣的同學可以自行研究。

server

Vue.js 2.0 支持了服務端渲染，所有服務端渲染相關的邏輯都在這個目錄下。注意：這部分代碼是跑在服務端的 Node.js，不要和跑在瀏覽器端的 Vue.js 混為一談。

服務端渲染主要的工作是把組件渲染為服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最后將靜態標記"混合"為客戶端上完全交互的應用程序。

sfc

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

這個目錄下的代碼邏輯會把 .vue 文件內容解析成一個 JavaScript 的對象。

shared
Vue.js 會定義一些工具方法，這里定義的工具方法都是會被瀏覽器端的 Vue.js 和服務端的 Vue.js 所共享的。

引用: Vue.js 技術揭秘.

GPU云服務器云服務器 vue源碼 vue webrtc 源碼目錄結構 webrtc目錄結構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103106.html

vue 源碼學習（一）目錄結構和構建過程簡介

摘要：框架使用了作為類型檢查，來保證項目的可讀性和維護性。的主目錄下有的配置文件，還有目錄，指定了各種自定義類型。表示構建出來的文件遵循規范。 Flow vue框架使用了Flow作為類型檢查，來保證項目的可讀性和維護性。vue.js的主目錄下有Flow的配置.flowconfig文件，還有flow目錄，指定了各種自定義類型。在學習源碼前可以先看下Flow的語法官方文檔目錄結構 vue....

lavnFan 2019-08-23 14:36 評論0 收藏0
人人都能懂的Vue源碼系列—01—Vue源碼目錄結構

摘要：閱讀的源碼，或者說閱讀一個框架的源碼，了解它的目錄結構都是很有幫助的。人人都能懂的源碼系列文章將會詳細的介紹源碼的方方面面。閱讀Vue的源碼，或者說閱讀一個框架的源碼，了解它的目錄結構都是很有幫助的。下面我們來看看Vue源碼的目錄結構。showImg(https://segmentfault.com/img/bV8fLS?w=598&h=654); Vue各目錄簡介下圖是Vue各個...

MAX_zuo 2019-08-22 16:14 評論0 收藏0
vue源碼解讀-目錄結構

摘要：目錄結構構建相關的文件，一般情況下我們不需要動鉤子別名配置目錄結構 ├── scripts ------------------------------- 構建相關的文件，一般情況下我們不需要動│ ├── git-hooks ------------------------- git鉤子│ ├── alias.js -------------------------- 別名配...

philadelphia 2019-08-23 13:51 評論0 收藏0
Vue源碼之目錄結構

摘要：運行時用來創建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。版本可以通過標簽直接用在瀏覽器中。為這些打包工具提供的默認文件是只有運行時的構建。為瀏覽器提供的用于在現代瀏覽器中通過直接導入。 Vue版本：2.6.9 源碼結構圖 ├─ .circleci // 包含CircleCI持續集成/持續部署工具的配置文件 ├─ .github ...

freewolf 2019-08-23 16:22 評論0 收藏0