(近期给自己立了个小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 源码比较的更多相关文章

  1. 项目源码--Android天气日历精致UI源码

    下载源码 技术要点: 1. 天气日历精致UI 2. Android的Http通信技术 3. Android的天气信息解析 4. Android的日历信息的统计 5. Andorid的地理位置的管理 6 ...

  2. chrome ui源码剖析-Accelerator(快捷键)

      好久没有自己写东西了,chrome有着取之不尽的技术精华供学习,记录一下. 源码目录: http://src.chromium.org/viewvc/chrome/trunk/src/ui/bas ...

  3. element ui源码解析 -- input篇

    el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...

  4. element ui源码解析 -- button篇

    要看源码就得从最简单的开始,button够简单的了,就从他开始吧. 安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是 ...

  5. elementUi、iview、ant Design源码button结构篇

    在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功 ...

  6. ASP.NET通用权限框架 权限管理系统源码jquery 精美UI源码

    软件技术开发,合作请联系QQ:858-048-581 开发工具 VS2010 .sql2005.2008等(在Sql server数据执行脚本即可)  VS2010 打开保证本地运行成功(数据库.源代 ...

  7. chrome ui源码剖析-ViewProp

      先熟悉set的find原理 http://www.cnblogs.com/Clingingboy/p/3252136.html 这个类改造下,还是非常实用的,可以对于不同的类型做数据存储 一.Vi ...

  8. Element UI 源码—— Carousel 走马灯学习

    参考博客:https://segmentfault.com/a/1190000014384638?utm_source=tag-newest

  9. 50个Android开发人员必备UI效果源码[转载]

    50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面 ...

随机推荐

  1. 隐马尔可夫随机场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 ...

  2. linux安装源码包报错

    报错代码1如下: [root@xiaoming nginx-]# ./configure --prefix=/soft/nginx- checking for OS + Linux -.el7.x86 ...

  3. 估计量|估计值|置信度|置信水平|非正态的小样本|t分布|大样本抽样分布|总体方差|

    5 估计量和估计值是什么? 估计量不是估计出来的量,是用于估计的量. 估计量:用于估计总体参数的随机变量,一般为样本统计量.如样本均值.样本比例.样本方差等.例如:样本均值就是总体均值的一个估计量. ...

  4. TreeviewEditor.rar

    本工具可以打开.保存指定格式的XML文件. 树形控件的节点可以编辑.删除.增加.使用本工具看方便地创建书或论文的目录大纲,我用这个工具已经写了好几本书了. 动态图1: 动态图2:编辑效果,支持节点拖曳 ...

  5. VisualStudioAddin2016Setup.rar

    本工具是用于Visual Studio 2010 /2012 的外接程序. 功能不太多,常用代码,引用管理等. 动态图: 下载地址: VisualStudioAddin2016Setup.rar

  6. 浏览器加载、渲染html的顺序和页面优化

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染(就是把请求的内容显示到浏览器屏幕上)的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分 ...

  7. 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 ...

  8. 安装python第三方包

    20190822 先说一下,有4种方法(我知道的): 1.源码安装 2.python自带包管理器安装 3.外部包管理器安装 4.whl格式安装 1.源码安装 Python第三方库几乎都可以在githu ...

  9. HDU1556 Color the ball [线段树模板]

    题意:区间修改序列值,最后输出. //hdu1166 #include<iostream> #include<cstdio> #include<cstring> # ...

  10. [LC] 225. Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...