Vue3集成Element-plus快速搭建頁面框架的過程

更新時(shí)間：2025年03月15日 10:51:48 作者：墨染夜雨箋

ElementPlus是一款基于Vue3的UI組件庫,提供了豐富的組件和響應(yīng)式設(shè)計(jì),易于使用和主題定制,在Vue3項(xiàng)目中集成ElementPlus,需要通過npm安裝并引入組件,主題色可以通過修改樣式文件進(jìn)行全局設(shè)置,本文介紹Vue3集成Element-plus快速搭建頁面框架,感興趣的朋友一起看看吧

Element Plus簡介

Element Plus 是一款基于 Vue 3 的桌面端 UI 組件庫，旨在為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理提供豐富、易用的組件，幫助快速構(gòu)建現(xiàn)代化的用戶界面。

主要特性：

豐富的組件體系：Element Plus 提供了大量的 UI 組件，包括按鈕、表格、表單、對(duì)話框、菜單等，滿足各種開發(fā)需求。
響應(yīng)式設(shè)計(jì)：組件采用響應(yīng)式布局，確保在不同設(shè)備和屏幕尺寸下均能良好展示。
易于使用：提供清晰的 API 和詳細(xì)的文檔，降低開發(fā)者的學(xué)習(xí)成本。
主題定制：支持主題定制，開發(fā)者可以根據(jù)項(xiàng)目需求調(diào)整樣式。

網(wǎng)站：https://element-plus.org/zh-CN/

Vue3集成Element Plus

IDEA打開已經(jīng)搭建好的Vue3項(xiàng)目

Vue3框架的搭建在這篇文章：

前端Vue3框架的搭建及工程目錄詳解

在IDEA打開控制臺(tái)（Terminal)，一定要先在控制臺(tái)下cd切換到Vue目錄下面

然后執(zhí)行下面的命令安裝element-plus

安裝依賴

npm i element-plus -S

如果想卸載element-plus，就執(zhí)行下面這段命令

npm uninstall element-plus

當(dāng)element-plus安裝完成后，可以在package.json可以看到依賴的相關(guān)信息

依賴放在node_modules包下的element-plus包里面。

當(dāng)卸載后，依賴會(huì)消失。

main.js引入

在element-plus的快速開始頁面：快速開始 | Element Plus有寫如何在main.js引入依賴。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

安裝好了之后，可以使用element-plus集成的組件

按鈕組件

選擇提供的Button組件，復(fù)制到Home.vue中,啟動(dòng)項(xiàng)目，就可以看到相應(yīng)的組件樣式。

<template>
<div>
  主頁
</div>
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
</template>
<script setup>
</script>

icon圖標(biāo)

想要使用icon圖標(biāo)的組件，需要安裝依賴，注冊(cè)所有圖標(biāo)。

npm install @element-plus/icons-vue

然后在main.js中添加這段代碼

// main.ts
// 如果您正在使用CDN引入，請(qǐng)刪除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App) //如果這行在main.js中就有，就不需要重復(fù)寫了
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

element-plus官網(wǎng)提供了很多常見的icon圖標(biāo)，直接點(diǎn)擊想要的icon圖標(biāo)，就可以復(fù)制它的組件代碼，然后粘貼到項(xiàng)目中

這里我復(fù)制的是icon code

<div style="padding: 50px">
  <el-icon size="20px" color="red"><View /></el-icon> //這個(gè)就是從官網(wǎng)復(fù)制的icon code
</div>

根據(jù)官網(wǎng)提供的API,開發(fā)者可以對(duì)組件的大小size和顏色color進(jìn)行修改

當(dāng)在按鈕或輸入框組件里面使用圖標(biāo),需要單獨(dú)導(dǎo)入圖標(biāo)

像這個(gè)帶日歷圖標(biāo)的搜索框，復(fù)制代碼后還要單獨(dú)導(dǎo)入圖標(biāo)，否則就只有輸入框，而沒有日歷圖標(biāo)（沒有明顯的報(bào)錯(cuò)提示）

如何將圖標(biāo)導(dǎo)入，并且在輸入框中顯示：鼠標(biāo)放到"Calendar"（suffix-icon的屬性上），快捷鍵alt+enter就會(huì)出現(xiàn)導(dǎo)入的選擇，選擇其中一個(gè)即可。

suffix-icon（后綴icon)是圖標(biāo)在框的末尾顯示，而prefix-icon(前綴icon)是圖標(biāo)在框的開頭顯示。

導(dǎo)入成功后，script中出現(xiàn)import的代碼

打開瀏覽器，"Calendar"的icon成功顯示。

Element Plus主題色設(shè)置

改變主題色可以在這里面的background-color進(jìn)行修改，但是每次都這樣比較麻煩，可以使用一種全局修改的方法。

安裝sass,unplugin-vue-components,unplugin-auto-import

npm install -D sass unplugin-vue-components unplugin-auto-import

配置index.scss文件放在src/assets/css下

@forward "element-plus/theme-chalk/src/common/var.scss" with(
  $colors:(
        "primary":("base":#2c82ff),
        "success":("base":#31bf00),
        "warning":("base":#ffad00),
        "danger":("base":#e52f2f),
        "info":("base":#8055ff),
  )
);

配置vite.config.js

import Components from 'unplugin-vue-components/vite'//自動(dòng)導(dǎo)入vue中的組件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'//對(duì)應(yīng)組件庫的導(dǎo)入
import AutoImport from 'unplugin-auto-import/vite'//自動(dòng)導(dǎo)入ui-組件，比如element-plus
  plugins: [
    vue(),
      //element-plus按需導(dǎo)入
    AutoImport({resolvers: [ElementPlusResolver()]}),
    //配置element-plus采用sass樣式配置系統(tǒng)
    Components({resolvers: [ElementPlusResolver({importStyle: 'sass'})]}),
  ],
  css:{
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/index.scss" as *;`,
      },
    }
  },

AutoImport: 這個(gè)插件用于自動(dòng)導(dǎo)入 Vue 組件和其他常用的 API。通過使用 ElementPlusResolver()，它會(huì)自動(dòng)導(dǎo)入 Element Plus 組件庫中的組件，而不需要手動(dòng)在每個(gè)文件中導(dǎo)入。這可以減少代碼的冗余，提高開發(fā)效率。

**Components**: 這個(gè)插件用于按需加載 Vue 組件。通過配置ElementPlusResolver({importStyle: 'sass'})，它會(huì)在使用 Element Plus 組件時(shí)，自動(dòng)引入相應(yīng)的 Sass 樣式。這意味著你可以在項(xiàng)目中使用 Element Plus 組件，而不需要手動(dòng)引入每個(gè)組件的樣式文件。

css: 這個(gè)部分配置了 CSS 預(yù)處理器的選項(xiàng)。

preprocessorOptions: 這里指定了 SCSS 的配置。

additionalData: 這個(gè)選項(xiàng)允許你在每個(gè) SCSS 文件的開頭自動(dòng)添加一些代碼。在這里，它會(huì)自動(dòng)引入 element-plus.scss 文件，這樣你在項(xiàng)目中的所有 SCSS 文件中都可以使用這個(gè)文件中定義的樣式，而不需要在每個(gè)文件中手動(dòng)引入。

父子組件

在src/views下新建一個(gè)文件Manager.vue,在里面寫入代碼

<template>
<div>
  這是父組件
  <RouterView />
</div>
</template>
<script setup>
</script>

修改src/router中index.js的代碼

//原先是：
// {path: '/', name: 'home', component: import('../views/Home.vue'),},
{ path: '/', component: import('../views/Manager.vue'),
      children:[
      {path: 'home', component: import('../views/Home.vue'),}
    ],
},

這樣的話通過http://localhost:5173/可以訪問到Manager.vue中的內(nèi)容

然后斜杠后面可以輸入子組件的路由，比如輸入http://localhost:5173/home，可以訪問到Manager.vue和Home.vue的內(nèi)容

父子組件中父組件是不變的，但子組件根據(jù)不同的路由而改變

這里舉個(gè)例子：

Vue3制作管理系統(tǒng)頁面配置頭部區(qū)域

將圖片放到src/assets/imgs的文件夾下，保存為logo.png

<template>
<div>
  <!--頭部區(qū)域開始-->
  <div style="height: 60px;border-bottom: 1px solid #eee; display: flex;align-items: center;">
    <div style="display: flex;align-items: center;padding-left: 1px;">
      <img src="../assets/imgs/logo.png" alt="" style="width: 40px;height: 40px;">
      <span style="font-size: 20px;font-weight: bold;color: #2c82ff;margin-left: 10px;">標(biāo)題區(qū)域</span>
    </div>
    <div style="flex:1 "></div>
  </div>
  <!--頭部區(qū)域結(jié)束-->
</div>
</template>
<script setup>
</script>

配置導(dǎo)航欄菜單

在element-plus官網(wǎng)搜索Menu

滑到側(cè)欄這個(gè)位置，根據(jù)它提供的樣例和代碼為參考進(jìn)行編寫

<template>
<div>
  <!--頭部區(qū)域開始-->
<!--  border-bottom: 1px solid #eee;是給頭部加一個(gè)底部邊框線,如果區(qū)域有背景色，可以看出來，在有背景色的情況下，去掉后就感覺上下是連起來的-->
  <div style="height: 60px; display: flex;">
<!--    width區(qū)域設(shè)置200px的寬度，和菜單寬度保持一致-->
    <div style="width: 240px; display: flex;align-items: center;padding-left: 20px;background-color:#3a456b;border-color: #3a456b;;">
      <img src="../assets/imgs/logo.png" alt="" style="width: 40px;height: 40px;border-radius: 100%;">
      <span style="font-size: 20px;font-weight: bold;color:  #ecf0f2;margin-left: 10px;">后臺(tái)管理端</span>
    </div>
    <div style="flex:1;border-bottom: 1px solid #ddd; display:flex;align-items:center;">
      <span style="padding-left: 20px">首頁/數(shù)據(jù)分析</span>
    </div>
    <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;">
      <el-dropdown >
      <div style="display: flex;align-items: center; border-bottom: 1px solid #ddd;height: 60px;">
        <img src="@/assets/imgs/admin.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;">
        <span style="margin-left: 5px;">管理員</span>
      </div>
        <template #dropdown>
          <el-dropdown-menu>
          <el-dropdown-item>個(gè)人中心</el-dropdown-item>
          <el-dropdown-item >退出登錄</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <!--頭部區(qū)域結(jié)束-->
  <!--下方區(qū)域開始-->
  <div style="display: flex;">
    <!--左側(cè)菜單區(qū)域開始-->
    <div style="width: 240px;box-shadow: 0 0 10px rgba(0,0,0,0.1);">
      <!--default-active="1"是默認(rèn)激活的菜單選項(xiàng)為1，如果是1-1-->
<!--      我想讓右側(cè)的邊框線觸底，因此用calc()計(jì)算高度，讓那條線觸底-->
<!--      default-openeds="['1']"是默認(rèn)展開的菜單-->
      <el-menu default-active="/manager/home" style="min-height: calc(100vh - 60px);" :default-openeds="['1']">
        <el-menu-item index="/manager/home">
          <el-icon><House /></el-icon>
          <span>首頁</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title >
            <el-icon><location /></el-icon>
            <span>數(shù)據(jù)管理</span>
          </template>
<!--          二級(jí)菜單-->
          <el-menu-item index="1-1">二級(jí)菜單</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!--左側(cè)菜單區(qū)域結(jié)束-->
    <!--右側(cè)內(nèi)容區(qū)域開始-->
    <div style="margin-left:10px;background-color: #f2f2f4;flex: 1;width: 0;margin-top: 10px;padding: 10px;">
      <RouterView />
    </div>
    <!--右側(cè)內(nèi)容區(qū)域結(jié)束-->
  </div>
</div>
<!--下方區(qū)域結(jié)束-->
</template>
<script setup>
</script>
<!-- <style scoped>和<style>兩種樣式，scoped是局部樣式，只對(duì)當(dāng)前組件有效，而不加scoped是全局樣式，對(duì)所有組件都有效。-->
<style>
.el-menu{
  background-color:#3a456b;
  border:none;
}
.el-sub-menu__title{
  background-color:#3a456b;
 color: #ddd;
}
.el-menu-item{
  height: 50px;
  color: #ddd;
}
.el-menu-item.is-active{
  background-color: #537bee;
  color: #ddd;
}
.el-sub-menu__title:hover{
  background-color: #7f98f8;
}
.el-menu-item:not(.is-active):hover{
  background-color:#5dade2;
  color: #333;
}
.el-dropdown{
  /*鼠標(biāo)移入時(shí)，會(huì)有一個(gè)小手的樣式*/
 cursor: pointer;
}
.el-tooltip__trigger{
  outline: none;
}
</style>

添加查詢框及添加數(shù)據(jù)

在src/assets/css中的global.css添加:

.card{
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,.12);
}

然后修改Home.vue

<template>
  <div>
    <div class="card" style="margin-bottom:5px;">
      <el-input v-model="data.name" placeholder="請(qǐng)輸入內(nèi)容" style="width: 300px;margin-right: 5px;" prefix-icon="Search"></el-input>
      <el-button type="primary">查詢</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="primary">新 增</el-button>
      <el-button type="danger">批量刪除</el-button>
      <el-button type="success">批量導(dǎo)入</el-button>
      <el-button type="info">批量導(dǎo)出</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名稱" width="180" />
        <el-table-column prop="phone" label="電話" />
        <el-table-column prop="address" label="地址" width="180" />
      </el-table>
    </div>
    <div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          :page-size="data.pageSize"
          layout="total, prev, pager, next"
          :total="data.total"
      />
    </div>
  </div>
</template>
<script setup>
import {reactive} from 'vue'
const data = reactive({
  name: null,
  pageNum: 1,
  pageSize: 5,
  total: 6,
  tableData: [
    { name: 'cpu', phone: '13877886677', address: '北京市朝陽區(qū)' },
    { name: 'cpunull', phone: '13988997788', address: '上海市徐匯區(qū)' },
    { name: '小張', phone: '138776554466', address: '安徽省合肥市' },
    { name: '小李', phone: '138799882566', address: '安徽省合肥市' },
    { name: '小王', phone: '13987622566', address: '安徽省合肥市' },
    { name: '小周', phone: '13487772266', address: '安徽省合肥市' },
  ]
})
</script>