iview 和 Elemet UI 源码比较

2023年12月26日 232次阅读 来源: 小鱼er

（近期给本身立了个小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挪用

    原文作者：小鱼er
    原文地址: https://segmentfault.com/a/1190000015689656
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞