简介

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库，也有基于angular版本的组件库，当前前端开发"三国鼎立"的时刻，Element 可以说是非常值得好好学习的一个桌面端组件库。

官网截图

2.11.0 版本更新

新特性

• Drawer
• 新增抽屉组件 (#16577 by @JeremyWuuuuu)

Bug 修复

• Checkbox
• 修复 CSS 样式问题 (#16006 by @Hazlank)
• Tree
• 更新类型定义为泛类型 (#15934 by @JeremyWuuuuu)
• 修复设置节点 isCurrent 的为 false 的问题 (#15870 by @kkkisme)
• Dropdown
• 更新 split-button 默认颜色 (#15931 by @JuniorTour)
• Cascader
• 修复一级菜单更新问题 (#16399 by @luckyCao)
• 更新显示正确的 header 的逻辑 (#16354 by @ziyoung)
• 懒加载时设默认值 (#16420 by @luckyCao)
• 修复显示问题 (#15935 by @junyiz)
• 对外暴露 getCheckedNodes 和修复 option 问题 (#16709 by @SimonaliaChen)
• Submenu
• 修复 append-to-body 问题 (#16289 by @a631807682)
• Table
• 修复 tree table 数据更新问题 (#16481 by @island205)
• Select
• 修复内存泄漏问题 (#16463 by @island205)
• InfiniteScroll
• 更新命名和说明 (#16698 by @iamkun)
• Avatar
• 修复图片不居中的问题 (#16489 by @luckyCao)
• Dialog
• 增加 destroyOnClose 属性 (#16455 by @ziyoung)
• Image
• 增加大图预览 (#16333 by @luckyCao)

优化

• Docs
• 修复 dropdown 示例 (#16193 by @webxmsj)
• 修正笔误 (#15971 by @howiefh)
• I18n
• 更新泰文翻译 (#16689 by @ponkrit)
• Chore
• 更新基础 API 地址 (#16607 by @iamkun)
• 增加 Form 的主题 token (#16699 by @iamkun)
• 更新统计 (#16609 by @iamkun)
• 修复文档锚点问题 (#16692 by @iamkun)

本地开发

• 安装

# 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

• 快速上手
• 完整引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; 

Vue.use(ElementUI);
new Vue({
 el: '#app',
 render: h => h(App)
});

• 通过 CDN 引入

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<link>

• 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
{
 "presets": [["es2015", { "modules": false }]],
 "plugins": [
 [
 "component",
 {
 "libraryName": "element-ui", 

 "styleLibraryName": "theme-chalk"
 }
 ]
 ]
}
// 如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
new Vue({
 el: '#app',
 render: h => h(App)
});

Hello World 示例

 
 
 <link>


 

 <el-button>Button/<el-button>
 <el-dialog>
 
Try Element

 /<el-dialog>