首頁技術(shù)文章正文

Element組件入門第一步：安裝和引入ElementUI

更新時間:2023年11月03日15時37分來源:傳智教育瀏覽次數(shù):

Element是餓了么團(tuán)隊研發(fā)的，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。利用組成網(wǎng)頁的部件，例如超鏈接、按鈕、圖片、表格、表單、分頁條等等。

安裝ElementUI組件庫 (在當(dāng)前工程的目錄下)，在命令行執(zhí)行指令：

npm install element-ui@2.15.3

引入ElementUI組件庫

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

訪問官網(wǎng)，復(fù)制組件代碼，調(diào)整

Table 表格：用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對數(shù)據(jù)進(jìn)行排序、篩選、對比或其他自定義操作。

1698996661165_表格.png

Pagination 分頁：當(dāng)數(shù)據(jù)量過多時，使用分頁分解數(shù)據(jù)。

1698996732770_常見組件.png

Dialog 對話框：在保留當(dāng)前頁面狀態(tài)的情況下，告知用戶并承載相關(guān)操作。

1698996798416_收貨地址.png

Form 表單：由輸入框、選擇器、單選框、多選框等控件組成，用以收集、校驗、提交數(shù)據(jù)。

1698996909648_表單.png

最新資訊