iview 和 Elemet UI 源码比较

hizengzeng 发布于2019-08-22 18:49 / 2920人阅读

摘要：近期给自己立了个小，读源码，每周至少读篇源码下面来谈谈和这两个基于的框架源码的基本结构以及区别。例如四两个库组件整体引入和按需引入整体引入两个库一样的方法。

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

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

一、文件结构
开发主要放在根文件夹下的src下:

1. ivew 文件结构
|--src
|--components //所有的UI组件
|--directives 
|--locale //语言
|--mixins 
|--styles
...
index.less //样式文件
|--utils
index.js  //入口文件

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调用

GPU云服务器云服务器 Elemet ui和前端前端和ui iView

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96247.html

iview 和 Elemet UI 源码比较

摘要：近期给自己立了个小，读源码，每周至少读篇源码下面来谈谈和这两个基于的框架源码的基本结构以及区别。例如四两个库组件整体引入和按需引入整体引入两个库一样的方法。（近期给自己立了个小flag，读源码，每周至少读1篇源码）下面来谈谈iview 和 Elemet UI 这两个基于Vue 的UI 框架源码的基本结构以及区别。一、文件结构开发主要放在根文件夹下的src下: 1. ivew 文件...

haoguo 2019-08-02 10:57 评论0 收藏0
iView 发布微信小程序 UI 组件库 iView Weapp

摘要：但是，我们注意到，微信小程序正在崛起，这将是移动端新的一种开发模式。不过微信对小程序越来越开放，给的入口也越来越多，这让很多开发者投入到小程序的开发上。地址文档欢迎和是什么微信小程序提供了自定义组件的功能，这使得成为了可能。 showImg(https://segmentfault.com/img/bVbb9fe?w=2856&h=1444); 末尾有彩蛋。过去的两年里，iView ...

Rindia 2019-08-22 17:57 评论0 收藏0
Element-ui实现合并多图上传（一次请求多张图片）

摘要：实现多图上传主要用到以下两个属性是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求在上传事件触发后，多图上传的默认实现调用了三次请求。前言工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。环境： Springboot+Vue+Element-ui 正文这次上传使用的是Elem...

loostudy 2019-08-19 10:51 评论0 收藏0