iview 和 Elemet UI 源码比较

Posted 2020-11-22 baimeishaoxia

（近期给自己立了个小flag，读源码，每周至少读1篇源码）

下面来谈谈iview 和 Elemet UI 这两个基于Vue 的UI 框架源码的基本结构以及区别。

一、文件结构
开发主要放在根文件夹下的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里导入；

二、入口文件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; 

三、样式文件index.less
两个UI库基本一样，都是将所有的样式都导入到同一个文件下，经过编译以供用户使用。例如ivew：

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

四、两个库组件整体引入和按需引入
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调用