vue整合ElementUI(適合新手快速入門)

學理發表於2020-12-13

vue整合ElementUI

1、安裝

這裡我使用的是vs開啟的vue專案,黑視窗模式進入專案路徑也可。

npm i element-ui -S

在這裡插入圖片描述

執行完上述命令。

2、引入Element

這裡我直接完整引入,當然大家也可以按需引入。

在專案的 main.js中寫入以下內容:

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

Vue.use(ElementUI);

3、測試

ElementUI官網上看到這樣一個例項,我們試著執行它看看。

在這裡插入圖片描述

檢視它的程式碼,將它的程式碼複製到我們的App.vue檔案中

在這裡插入圖片描述

在這裡插入圖片描述

在終端執行命令npm run dev

在這裡插入圖片描述

檢視網站

在這裡插入圖片描述

證明整合ElementUI已經成功了~大家可以試著去玩玩。

相關文章