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 //入口文件
- 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 源码比较的更多相关文章
- 项目源码--Android天气日历精致UI源码
下载源码 技术要点: 1. 天气日历精致UI 2. Android的Http通信技术 3. Android的天气信息解析 4. Android的日历信息的统计 5. Andorid的地理位置的管理 6 ...
- chrome ui源码剖析-Accelerator(快捷键)
好久没有自己写东西了,chrome有着取之不尽的技术精华供学习,记录一下. 源码目录: http://src.chromium.org/viewvc/chrome/trunk/src/ui/bas ...
- element ui源码解析 -- input篇
el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...
- element ui源码解析 -- button篇
要看源码就得从最简单的开始,button够简单的了,就从他开始吧. 安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是 ...
- elementUi、iview、ant Design源码button结构篇
在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功 ...
- ASP.NET通用权限框架 权限管理系统源码jquery 精美UI源码
软件技术开发,合作请联系QQ:858-048-581 开发工具 VS2010 .sql2005.2008等(在Sql server数据执行脚本即可) VS2010 打开保证本地运行成功(数据库.源代 ...
- chrome ui源码剖析-ViewProp
先熟悉set的find原理 http://www.cnblogs.com/Clingingboy/p/3252136.html 这个类改造下,还是非常实用的,可以对于不同的类型做数据存储 一.Vi ...
- Element UI 源码—— Carousel 走马灯学习
参考博客:https://segmentfault.com/a/1190000014384638?utm_source=tag-newest
- 50个Android开发人员必备UI效果源码[转载]
50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面 ...
随机推荐
- 隐马尔可夫随机场HMM
概率知识点: 0=<P(A)<=1 P(True)=1;P(False)=0 P(A)+P(B)-P(A and B) = P(A or B) P(A|B)=P(A,B)/P(B) =&g ...
- linux安装源码包报错
报错代码1如下: [root@xiaoming nginx-]# ./configure --prefix=/soft/nginx- checking for OS + Linux -.el7.x86 ...
- 估计量|估计值|置信度|置信水平|非正态的小样本|t分布|大样本抽样分布|总体方差|
5 估计量和估计值是什么? 估计量不是估计出来的量,是用于估计的量. 估计量:用于估计总体参数的随机变量,一般为样本统计量.如样本均值.样本比例.样本方差等.例如:样本均值就是总体均值的一个估计量. ...
- TreeviewEditor.rar
本工具可以打开.保存指定格式的XML文件. 树形控件的节点可以编辑.删除.增加.使用本工具看方便地创建书或论文的目录大纲,我用这个工具已经写了好几本书了. 动态图1: 动态图2:编辑效果,支持节点拖曳 ...
- VisualStudioAddin2016Setup.rar
本工具是用于Visual Studio 2010 /2012 的外接程序. 功能不太多,常用代码,引用管理等. 动态图: 下载地址: VisualStudioAddin2016Setup.rar
- 浏览器加载、渲染html的顺序和页面优化
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分 ...
- idea出现 Unable to open debugger port (127.0.0.1:xxxx): java.net.SocketException "socket closed" 解决方案
第一种:重启电脑,太费劲: 第二种: 1)根据端口号找到进程pid netstat -aon|findstr "1099" 2)杀掉进程pid即可 netstat -aon|fin ...
- 安装python第三方包
20190822 先说一下,有4种方法(我知道的): 1.源码安装 2.python自带包管理器安装 3.外部包管理器安装 4.whl格式安装 1.源码安装 Python第三方库几乎都可以在githu ...
- HDU1556 Color the ball [线段树模板]
题意:区间修改序列值,最后输出. //hdu1166 #include<iostream> #include<cstdio> #include<cstring> # ...
- [LC] 225. Implement Stack using Queues
Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...