Element UI簡(jiǎn)介

Element UI 是一套基于 Vue 的桌面端組件庫(kù)，封裝好了很多常用的 UI 組件，開(kāi)發(fā)者可以使用 ElementUI 快速搭建一個(gè)網(wǎng)站。

官網(wǎng)：https://element.eleme.cn/

官網(wǎng)中有各個(gè)組件使用的詳細(xì)教程，非常全面，楠哥寫(xiě)這篇教程的目的是幫助大家快速上手 Element UI 的使用，大家在實(shí)際開(kāi)發(fā)中可以結(jié)合官網(wǎng)文檔來(lái)完成具體業(yè)務(wù)代碼的開(kāi)發(fā)。

Element UI 安裝

要使用 Element UI，首先確保你的電腦上已經(jīng)成功安裝了 Vue，這里不再介紹 Vue 的安裝步驟，沒(méi)有安裝 Vue 的小伙伴可以自行查找教程進(jìn)行安裝。

1、創(chuàng)建 Vue 工程，命令如下。

vue ui

2、選擇“創(chuàng)建”，設(shè)置工程存放路徑，點(diǎn)擊下方的“在此創(chuàng)建新項(xiàng)目”按鈕。

3、輸入工程名，點(diǎn)擊下方的“下一步”按鈕。

4、選擇“手動(dòng)配置項(xiàng)目”，點(diǎn)擊“下一步”按鈕。

5、打開(kāi) Router、Vuex選項(xiàng)，關(guān)閉Linter / Formatter選項(xiàng)，點(diǎn)擊“下一步”按鈕。

6、打開(kāi)Use history mode for router選項(xiàng)，點(diǎn)擊“下一步”按鈕。

7、點(diǎn)擊“創(chuàng)建項(xiàng)目，不保存預(yù)設(shè)”，然后耐心等待，創(chuàng)建完成之后會(huì)跳轉(zhuǎn)到主頁(yè)面。

8、點(diǎn)擊“添加插件”按鈕。

9、在搜索框輸入“element”。

10、選中第一個(gè)，點(diǎn)擊“安裝 vue-cli-plugin-element”，耐心等待即可。

11、打開(kāi)項(xiàng)目，在 App.vue 中添加如下代碼。

默認(rèn)按鈕

運(yùn)行項(xiàng)目，如果能看到如下效果圖，則說(shuō)明 Element UI 已安裝成功。

以上就是 Element UI 安裝的全部步驟，下一篇教程楠哥將帶領(lǐng)大家正式開(kāi)始學(xué)習(xí) Element UI 具體組件的使用，如果你覺(jué)得這篇教程對(duì)你有幫助，就幫楠哥點(diǎn)個(gè)贊吧，我們下期教程再見(jiàn)。