簡介

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>