(近期给自己立了个小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. 108)PHP分页显示

    一个代码页的链接:https://www.cnblogs.com/mmykdbc/p/6688460.html 首先一个简单的代码展示: 目录关系: 数据库表格展示: 结果展示:   然后  代码展示 ...

  2. 概率DP——BZOJ4008 [HNOI2015]亚瑟王

    [HNOI2015]亚瑟王 Description 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂 ...

  3. [LC] 23. Merge k Sorted Lists

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. E ...

  4. 四剑客(sed)

    一. sed sed简介: 用Linux环境中的编辑器程序来编辑文本文件.这些编辑器可以让你用简单命令或鼠标单击来轻松地处理文本文件中的文本.但有时候,你会发现需要自动处理文本文件,可你又不想动用全副 ...

  5. [LC] 359. Logger Rate Limiter

    Design a logger system that receive stream of messages along with its timestamps, each message shoul ...

  6. LeetCode Day 11

    LeetCode0021 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1 ...

  7. Python实现:生产者消费者模型(Producer Consumer Model)

    #!/usr/bin/env python #encoding:utf8 from Queue import Queue import random,threading,time #生产者类 clas ...

  8. stress施压案例分析——cpu、io、mem【命令分析】

    stress施压命令分析 一.stress --cpu 1 --timeout 600  分析现象?负载为啥这么高?top命令查看用户进程消耗的cpu过高(stress进程消耗的) 分析现象,可以看出 ...

  9. Docker学习笔记_10 docker应用 - 部署TOMCAT服务

    选择基镜像 基镜像使用dokcer hub官方提供的tomcat8 alpine当前最新版本,https://hub.docker.com/_/tomcat/ docker pull tomcat:8 ...

  10. python基础函数、方法

    python的函数和方法,通过def 定义: 函数的特性: 减少重复代码 使程序变的可扩展 使程序变得易维护 函数和方法的区别:函数有返回值.方法没有 语法定义: def sayhi():#函数名 p ...