iview 和 Elemet UI 源碼比較

hizengzeng 發布于2019-08-22 18:49 / 2922人閱讀

摘要：近期給自己立了個小，讀源碼，每周至少讀篇源碼下面來談談和這兩個基于的框架源碼的基本結構以及區別。例如四兩個庫組件整體引入和按需引入整體引入兩個庫一樣的方法。

（近期給自己立了個小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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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