iview 和 Elemet UI 源码比较

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iview 和 Elemet UI 源码比较相关的知识,希望对你有一定的参考价值。

(近期给自己立了个小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调用










以上是关于iview 和 Elemet UI 源码比较的主要内容,如果未能解决你的问题,请参考以下文章

elementUiiviewant Design源码button结构篇

小程序的 iview Weapp 组件库的使用

iview-ui 是英文的吗?

vue框架iview中Table动态表头可编辑内容的jsx写法

页面中使用多个element-ui upload上传组件时绑定对应元素

iview Table表格组件无法拆分单元格的解决思路