摘要：近期给自己立了个小，读源码，每周至少读篇源码下面来谈谈和这两个基于的框架源码的基本结构以及区别。例如四两个库组件整体引入和按需引入整体引入两个库一样的方法。
（近期给自己立了个小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调用
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52669.html
摘要：近期给自己立了个小，读源码，每周至少读篇源码下面来谈谈和这两个基于的框架源码的基本结构以及区别。例如四两个库组件整体引入和按需引入整体引入两个库一样的方法。 （近期给自己立了个小flag，读源码，每周至少读1篇源码） 下面来谈谈iview 和 Elemet UI 这两个基于Vue 的UI 框架源码的基本结构以及区别。 一、文件结构开发主要放在根文件夹下的src下: 1. ivew 文件...
摘要：但是，我们注意到，微信小程序正在崛起，这将是移动端新的一种开发模式。不过微信对小程序越来越开放，给的入口也越来越多，这让很多开发者投入到小程序的开发上。地址文档欢迎和是什么微信小程序提供了自定义组件的功能，这使得成为了可能。 showImg(https://segmentfault.com/img/bVbb9fe?w=2856&h=1444); 末尾有彩蛋。 过去的两年里，iView ...
摘要：实现多图上传主要用到以下两个属性是自带多图上传的，但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入，有截图可以看出，实质是进行多次请求在上传事件触发后，多图上传的默认实现调用了三次请求。 前言 工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。 环境： Springboot+Vue+Element-ui 正文 这次上传使用的是Elem...
阅读 2225·2021-11-25 09:43
阅读 2912·2019-08-30 15:52
阅读 1868·2019-08-30 15:44
阅读 961·2019-08-30 10:58
阅读 733·2019-08-29 18:43
阅读 3195·2019-08-29 18:36
阅读 2293·2019-08-29 17:02
阅读 1410·2019-08-29 17:01
