最近沒那么忙，準(zhǔn)備研究下element-ui源碼，借簽一下大神的組件設(shè)計思路，來提升下組件開發(fā)的能力，將其運用到工作中，提升組件的可復(fù)用性和可維護(hù)性。通過源碼來vue、css、組件設(shè)計等知識。首先從github上下載element-ui的源碼，解壓后目錄如下所示：

// 源碼開發(fā)包目錄結(jié)構(gòu)
element
    ├──.github                 // github的ISSUE等文件模板
    ├── build                  // webpack編譯配置文件等
    ├── examples               // 官方主頁項目包
    ├── lib                    // 打包后文件目錄
    ├── node_modules           // 模塊依賴目錄
    ├── packages               // 組件的源碼目錄
        ├── alert              // 具體組件源碼包
            ├── src            // Vue組件包
            ├── index.js       // 入口文件
    ├── src                    // 源碼目錄
        ├── directive          // 實現(xiàn)滾輪優(yōu)化，鼠標(biāo)點擊優(yōu)化
        ├── locale             // i18n國際化
        ├── mixins             // Vue混合器
        ├── transition         // 樣式過渡效果
        ├── utils              // 工具類包
        ├── index.js           // 源碼入口文件
    ├── test                   // 測試目錄
        ├── unit               // 單元測試目錄
            ├── coverage       // 單元測試覆蓋率包
            ├── specs          // 測試用例源碼包
            ├── index.js       // 測試入口
            ├── karma.conf.js  // karma配置文件
            ├── utils.js       // 工具類
    ├── types                  // typescript文件包
    ├── .babelrc               // babel配置文件
    ├── .eslintignore          // eslint配置忽略文件
    ├── .eslintrc              // eslint配置
    ├── .gitignore             // git忽略文件
    ├── .travis.yml            // 持續(xù)構(gòu)建配置
    ├── package.json           // npm包核心文件
    ├── components.json        // 組件列表json
    ├── yarm.lock              // yram版本控制文件
    ├── package-lock.json      // npm包版本控制文件
    ├── postcss.config.js      // postcss配置文件

在閱讀前端項目源碼時，我有個習(xí)慣，首先看的就是package.json文件，在該文件中我一般主要關(guān)注入口文件，引用的第三方庫，執(zhí)行的腳本命令這三個點，然后再看代碼。

1. package.json文件

1.1第三方庫

這里主要介紹下dependencies下的源碼，在開發(fā)的時候一般都會用到，element-ui主要引入了以下6個js庫：

"async-validator": "~1.8.1",  #異步數(shù)據(jù)驗證插件
    "babel-helper-vue-jsx-merge-props": "^2.0.0",  #jsx和vue合并插件
    "deepmerge": "^1.2.0",  #對象深度合并插件
    "normalize-wheel": "^1.0.1",  #瀏覽器滾輪兼容插件
    "resize-observer-polyfill": "^1.5.0",  #監(jiān)聽元素變化插件
    "throttle-debounce": "^1.0.1"  #節(jié)流去抖插件

下面主要介紹下src目錄packages目錄。

2.src

2.1. index.js

index.js文件為入口文件，其主要作用是將packages目錄下的組件引入進(jìn)來進(jìn)行注冊，然后再導(dǎo)出。主要步驟如下所示：

• 1. 使用import引入所有組件。
• 2.定義components數(shù)組，將引入的組件都添加到數(shù)據(jù)中。
• 3.定義install函數(shù)，在函數(shù)中主要包括以下幾個步驟

• a.設(shè)置國際化
• b.遍歷components數(shù)組，對組件進(jìn)行注冊。
• c.引用指令。
• d.將loading，msgbox，alert，confirm，prompt，notify，message掛載到Vue上，這就是為什么我們可以在組件中可以直接通過this.$message等方式來調(diào)用的原因。

• 4.使用export default導(dǎo)出，方便外部進(jìn)行調(diào)用。

2.2.directives

directives文件夾下包括了鼠標(biāo)滾動事件和重復(fù)點擊事件兩個指令。主要是用于優(yōu)化這兩個事件。

2.3.locale

locale文件夾主要跟國際化相關(guān)，存儲一些國際化的文件，每一種語言一個配置文件。

2.4 mixins

mixins下包含一些常用的混合器。

2.5 transition

transition下包含一些樣式過渡效果。

2.6 utils

utils下包含一些常用的工具方法。

3. packages目錄

packages目錄包括了所有的組件和主題樣式theme-chalk。

3.1 theme-chalk

該文件夾主要是包括了所有組件的樣式信息，如果要創(chuàng)建不同的主題，只需修改該文件夾下面的樣式就可以了。element-ui使用的是scss，其代碼都是基于scss來編寫的，比較容易讀懂。具體的樣式定義，樣式規(guī)則將在后面單獨寫一批文章來總結(jié)。

3.2 組件

每一個組件目錄基本都是包括一個main.vue文件和一個index.js文件。

3.2.1 main.vue

用于創(chuàng)建組件，包括模板代碼、樣式代碼和js代碼。

3.2.2 index.js

該文件主要是用于注冊組件，方便使用vue.use來引入，基本都是如下所示的代碼。

import Alert from './src/main';

/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};

export default Alert;

開篇主要介紹到這里了，后面將分析一些比較復(fù)雜點的組件。