搭建本身的 vue 組件庫（二） —— Element-ui 項目分析

Element UI 項目分析

講過 vue 的插件開發原理，火燒眉毛的想要搭建一套本身的 插件庫，那就從熟悉市面上最經常使用到的 vue UI 組件 ———— Element UI 開始吧。

使用 vue init webpack-simple productName 初始化項目

前提環境： node npm vue-cli

# init
vue init webpack-simple my-project

# run 
cd my-project
npm install 
npm run dev
複製代碼

在項目中 安裝 Element

npm install element-ui --save-dev
複製代碼

目錄結構

安裝 element-ui 以後，打開 node_modules/element-ui 目錄

Element 的源碼分爲 源碼版本 和 發佈版本（npm install element-ui 時安裝到 node_modules 中的 element-ui 文件），發佈版本少了不少源碼文件的webpack 等配置文件，項目結構也更加清晰，方便理解。 這裏分析的就是發佈版本。

element-ui
    |--- lib                        // 存放 打包後問文件目錄
    |--- packages                   // 組件的源碼目錄
        |--- alert                  // 組件的源碼包
            |--- src                // 組件bao
            |--- index.js           // 組件的入口文件
    |--- src                        // 源碼目錄
        |--- directive              // 實現滾動優化，鼠標點擊優化
        |--- locale                 // i18n 國際化
        |--- mixins                 // Vue 混合器
        |--- transition             // 樣式過渡效果
        |--- utils                  //工具類包
        |--- index.js               //源碼入口文件
    |--- types                      //typescript 文件包
    |--- package.json               //npm 包依賴、文件配置
複製代碼

上面也提到了 Element-ui 的源碼是分爲 源碼版本 和 發佈版本， 從源碼版本的 build/webpack.common.js 文件中的 webpack 配置的 entry 能夠看到 Element 的文件入口是 src/index.js 那麼咱們的分析也從 src/index 入手。

src/index.js

// src/index.js

import Pagination from '../packages/pagination/index.js'
import Dialog from '../packages/dialog/index'
...   //packages 下的導入組件包

const components = [   // 講全部的組件統一放到 components 中
    Pagination,
    Dialog,
    ...
]

const install = function(Vue,opts = {}) {

    components.map(component => {
        // 遍歷將組件加入到Vue中
        Vue.component(component.name, component);
    });

    // 加載中
    Vue.use(Loading.directive);

    // 定義Vue的原型 prototype
    Vue.prototype.$ELEMENT = {
        size: opts.size || '',
        zIndex: opts.zIndex || 2000
    };

    Vue.prototype.$alert = MessageBox.alert;
}

複製代碼

Element-ui 的入口文件，遵循於 vue插件開發 的開發方式。

文件的頭部引入了 packages/xx/index.js, 這個是 Element 內置組件的入口文件。

install 是 vue 插件的公開方法。當使用 Vue.use(element) 的時候將會調用這個方法。 這個方法的第一個參數是 Vue 構造器， 第二個參數是一個可選的對象。

在 vue插件開發中提到插件的第二種形式 -- 添加全局資源: 指令/過濾器/過渡/組件 在 install 中,將 內置的文件經過 組件註冊的形式將 組件添加到了 Elemnet 的全局資源中。在使用 Element 的項目中， 咱們會直接使用 <el-input />, 這即是 Vue.component(component.name,component) 這句話的功勞。 若是對於組件註冊不熟悉 能夠看 官網 組件註冊

Vue.use(Loading.directive);
複製代碼

這行代碼一樣是插件開發的第二種形式，它將 Loading 組件的 directive 掛載到全局資源。

一樣也使用到了vue插件開發中提到插件的第四種形式 -- 添加 vue 實例方法

Vue.prototype.$alert = MessageBox.alert;
複製代碼

在使用 Element 的時候，咱們就可使用 this.$alert('xxxx') 這種寫法了。

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
    }
複製代碼

當檢測到 Vue 是全局變量的時候，自動將 執行 install 方法

module.exports = {
    version: 'xxx',
    install,
    CollapseTransition,
    Loading,
    Pagination,
    Dialog,
    ...
}
module.exports.default = module.exports;
複製代碼

導出 Element,這裏導出的就是 使用 import Element from 'Element' 接收到的對象。 能夠看出 src/index.js 文件不只導出了 version install, 同時還導出了 Dialog Loading 組件，這是由於 Element 的組件是能夠單獨引入項目，內置的每個組件也一樣有一個 install 方法。

packages/button/src/index.js

在分析完 src/index.js 文件以後，能夠看到， Element 的核心就是它的組件，不一樣功能的組件使得 Element 能夠適用於不少場景。

咱們從最多見的 button 的入口分析，Element 中一個組件的構成。

import ElButton from './src/button';

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

export default ElButton;


複製代碼

能夠看出這個文件是 src/index 的簡單版本，返回 ElButton 對象，該對象包含一個 install 方法。 而且在 install 方法中給 Vue 掛在了一個 ElButton 組件資源。

而在 src/index.js 文件中 Element 又導入了這個 ElButton 組件。 咱們知道在使用 Element 單個組件的時候咱們這樣寫

import {Button} from 'element-ui'
   Vue.use(Button)
複製代碼

這裏 Vue.use(Button) 就會找到 Button 組件的 install 方法，並給 Vue 掛載了一個 ElButton 組件資源。

說過了 vue插件開發, 也看過了 Element-ui 的項目結構和項目入口文件。下一節 咱們將會講述如何 在 npm 上面發佈一個咱們仿照 Element-ui 的項目。