簡介
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 的為 fal 的問題 (#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增加 destroyOnClo 屬性 (#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.u(ElementUI);new Vue({ el: '#app', render: h => h(App)});通過 CDN 引入
目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用。
<!-- 引入樣式 --><link rel="stylesheet" ><!-- 引入組件庫 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>自動按需引入組件 (推薦)
babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式。
# 安裝插件npm i babel-plugin-import -D// 在.babelrc 中添加配置{ "prets": [["es2015", { "modules": fal }]], "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.u(Button) * Vue.u(Select) */new Vue({ el: '#app', render: h => h(App)});Hello World 示例
<!DOCTYPE html><html><head> <meta chart="UTF-8"> <!-- import CSS --> <link rel="stylesheet" ></head><body> <div id="app"> <el-button @click="visible = true">Button</el-button> <el-dialog :visible.sync="visible" title="Hello world"> <p>Try Element</p> </el-dialog> </div></body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { visible: fal } } }) </script></html>
本文發布于:2023-02-28 20:16:00，感謝您對本站的認可！
本文鏈接：http://m.newhan.cn/zhishi/a/167766681980310.html
版權聲明：本站內容均來自互聯網，僅供演示用，請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系，我們將在24小時內刪除。
本文word下載地址：三國鼎立web(三國鼎立web 每日任務).doc
本文 PDF 下載地址：三國鼎立web(三國鼎立web 每日任務).pdf
| 留言與評論（共有 0 條評論） |
