目錄

前言

為什么要學習?ElementPlus？

正文

步驟

1 創建 一個工程化的vue 項目

?2 安裝 element-Plus :Form 表單 | Element Plus

1 點擊 當前界面的指南

2 點擊左邊菜單欄上的安裝，選擇包管理器

3 運行該命令

demo(案例1 ）

步驟

1? 在main.js 引入 element-plus?

2? 在src 文件夾下，自定義vue 文件

3? 查看效果：看到?package.json ,點擊調試

4 點擊 URL ,看到瀏覽器

做法（修改部分按鈕）

總之：

demo(案例2?）

總結

---

前言

為什么要學習?ElementPlus？

答：讓我們前端界面更加美觀

網址：Form 表單 | Element Plus

---

正文

步驟

1 創建 一個工程化的vue 項目

大致步驟，見 博客：初識Vue3(詳細版:創建，啟動vue 項目）-CSDN博客

vue 工程創建成功

2 安裝 element-Plus :Form 表單 | Element Plus

步驟

1 點擊 當前界面的指南

2 點擊左邊菜單欄上的安裝，選擇包管理器

• 復制 以下命令

npm install element-plus --save

3 運行該命令

注意：這里可以使用在黑窗口中運行，也可以在vscode 終端運行

這里我是在vocode?終端運行

1 打開?vocode? 選擇 文件---打開文件夾，找到下載好的vue 工程，導入

2 在終端運行該命令，等待 node_modules 出現 @element -plus

demo(案例1 ）

目的：展示 element-plus 官網上 button 按鈕上的案例

如圖所示：

步驟

1? 在main.js 引入 element-plus?

在快速開始，點擊 復制 完整引入代碼

將復制好的代碼，替換原本的main.js 代碼

2? 在src 文件夾下，自定義vue 文件

我這里是button.vue

打開element-plus 看到 組件

• 看到右下角 <> 這個圖案，點擊可以看到 這些按鈕的源碼

復制這些代碼，粘貼到之前我們自定義的vue 文件

調整：將script 標簽，放在最前頭

做法：

1 在app.vue 中導入 自定義的vue 文件，同時為了更好的展示效果，我將之前的app.vue中的內容刪掉

2 在script 標簽中導入 button.vue ，和早template 標簽中使用? 自定義標簽 buttonVue

---

app.vue 修改后的代碼

<script setup>
import buttonVue from './button.vue'
</script><template><button-vue></button-vue>
</template>

3? 查看效果：看到?package.json ,點擊調試

4 點擊 URL ,看到瀏覽器

---

如果這些組件，不符合你的要求，例如，我想要去除掉后兩行

做法（修改部分按鈕）

打開瀏覽器的檢查，可以看到每一個div 都對應一行按鈕

在 button.vue 除掉 后兩行按鈕表示的代碼，刷新以下

總之：

就是通過瀏覽器檢查，找到每一個按鈕對應的代碼，根據需要修改

仔細閱讀 element-plus 官網

---

demo(案例2?）

目的：延續之前的 button.vite,修改第一行的Danger 按鈕改為禁用狀態?

閱讀 element-plus 官網，在前的button 按鈕中，往下滑看到?Button API

發現 disabled表示按鈕是否為禁用狀態?，默認是? flase?

現在修改 disabled 的值為true ,讓 該按鈕無效

效果展示

會發現，你點這個按鈕和點其他按鈕是不一樣的！

---

總結

本篇博客，學習了element-plus ,重點是 閱讀?element-plus 官網，根據瀏覽官網上的內容，來實現自己的目的。