iview 和 Elemet UI 源碼比較

（近期給本身立了個小flag，讀源碼，每週至少讀1篇源碼）

下面來談談iview 和 Elemet UI 這兩個基於Vue 的UI 框架源碼的基本結構以及區別。

1、文件結構
開發主要放在根文件夾下的src下:

1. ivew 文件結構
|--src
|--components //全部的UI組件
|--directives 
|--locale //語言
|--mixins 
|--styles
...
index.less //樣式文件
|--utils
index.js  //入口文件

1. element UI 文件結構 ：與iview稍微不一樣的是
   ● 把 components UI組件文件夾直接放在根文件夾下名爲 packages;
   ● 樣式文件放在了packages下的theme-chalk 下，全部的樣式都在index.scss裏導入；

2、入口文件index.js
兩個UI庫基本同樣，主要分爲如下幾步：
1.引入全部的UI組件：

import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
...

const components = [
  Pagination,
  Dialog,
   ...
}

2.install 方法

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

3.自動安裝

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

4.導出組件以及其它須要導出的屬性或方法

module.exports = {}；//至關於ES6 export default {};
//若是想了解更多關於模塊加載的知識能夠去看阮老師的文章
//http://es6.ruanyifeng.com/#docs/module-loader
module.exports.default = module.exports;

3、樣式文件index.less
兩個UI庫基本同樣，都是將全部的樣式都導入到同一個文件下，通過編譯以供用戶使用。例如ivew：

@import "./custom";
@import "./mixins/index";
@import "./common/index";
@import "./animation/index";
@import "./components/index";

4、兩個庫組件總體引入和按需引入
1.總體引入：
兩個庫同樣的方法。

import uiName from '***';
import '***.css';

Vue.use(uiName);

這是由於源碼入口文件index.html都採用了一致的方法：見上面第二條解釋;

2.按需引入：
兩個庫均可以掛在全局組件上調用：

import { Button, Table } from '***';

Vue.component('Button', Button);
Vue.component('Table', Table);

可是 element UI 引入後 還能夠這樣調用：

Vue.use(Button)
Vue.use(Select)

這是由於 element UI 在每一個組件上都用了install 方法，ivew則沒有用，不能用.use調用