iview and Elemet UI source code comparison

(Recently established himself a small flag, read the source code, source code read at least a week)

Here to talk about both iview and Elemet UI UI framework based on the basic structure of the source and the differences Vue.

First, the file structure
developed primarily on the src folder under the root:

1. ivew 文件结构
|--src
|--components //所有的UI组件
|--directives 
|--locale //语言
|--mixins 
|--styles
...
index.less //样式文件
|--utils
index.js  //入口文件

element UI file structure: and is slightly different iview
● the components UI components folder directly on the root folder named Packages;
● pattern file stored in theme-chalk in packages, in all styles index. scss in import;

Second, the entry file index.js
two UI library essentially the same, in the following steps:
1. introduction of all UI components:

import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
...

const components = [
  Pagination,
  Dialog,
   ...
}

2.install method

const install = function(Vue, opts = {}) {...}

3. Automatic installation

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

4. The export component, and other properties or methods need to be exported

module.exports = {}；//相当于ES6 export default {};
//如果想了解更多关于模块加载的知识可以去看阮老师的文章
//http://es6.ruanyifeng.com/#docs/module-loader
module.exports.default = module.exports;

Third, the style file index.less
two basic UI library, are all the styles are imported into the same file, compiled for users. For example ivew:

@import "./custom";
@import "./mixins/index";
@import "./common/index";
@import "./animation/index";
@import "./components/index";

Fourth, the whole assembly is introduced, and two libraries demand introduction
1. entirety:
the same two library methods.

import uiName from '***';
import '***.css';

Vue.use(uiName);

This is because the source file index.html inlet have adopted the same method: see above explained second;

2. Demand the introduction:
both libraries can be hung on a global component calls:

import { Button, Table } from '***';

Vue.component('Button', Button);
Vue.component('Table', Table);

But after UI element introduced also can call:

Vue.use(Button)
Vue.use(Select)

This is because on every element UI components with the install method, ivew is no use, it can not be used .use call

Guess you like