ElementPlus插件的安装和使用
生活随笔
收集整理的這篇文章主要介紹了
ElementPlus插件的安装和使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ElementPlus插件安裝和使用
npm install element-plus --save
src/main.ts新增
// 關鍵節點：全局注冊 Element Plus，包含樣式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 核心樣式
app.use(ElementPlus) // 注冊全局
mkdir -p src/layouts src/components src/views src/router src/store
touch src/layouts/MainLayout.vue
<template>
<!--
主布局：企業級前端系統標準骨架
1. 左側為多級導航菜單（AppAsideMenu 組件，參考 Element Plus 多級菜單官方樣式）
2. 上方為頭部工具欄（AppHeaderBar 組件，可放用戶信息/全局操作/設置）
3. 中間為主內容區（router-view 占位，渲染路由對應頁面）
4. el-container 嵌套結構保證響應式和樣式隔離
-->
<el-container class="main-layout">
<!-- 側邊欄：寬度固定，可后續接入收縮/權限等功能 -->
<el-aside width="220px" class="aside-menu">
<!-- 多級菜單組件（所有菜單內容均可配置擴展） -->
<AppAsideMenu />
</el-aside>
<!-- 右側主區：頭部 + 主內容區 -->
<el-container>
<!-- 頭部欄（頂部工具區，可放Logo、面包屑、用戶等） -->
<el-header height="56px" class="header-bar">
<AppHeaderBar />
</el-header>
<!-- 主內容區：所有頁面的內容都渲染在這里 -->
<el-main class="main-content">
<router-view />
<!-- router-view 占位，動態加載當前路由組件 -->
</el-main>
</el-container>
</el-container>
</template>
<script setup lang="ts">
/**
* 主布局文件 MainLayout.vue
* - 負責所有頁面的基礎框架搭建
* - 內部依賴兩個核心基礎組件（AppAsideMenu、AppHeaderBar），各自單獨維護
* - 可通過 provide/inject、Pinia、props、slots 等方式進行全局交互
*/
import AppAsideMenu from '@/components/AppAsideMenu.vue' // 左側多級菜單
import AppHeaderBar from '@/components/AppHeaderBar.vue' // 頂部工具欄
</script>
<style scoped>
/* 主布局整體撐滿視口 */
.main-layout {
height: 100vh; /* 100%視口高度，撐滿瀏覽器 */
}
/* 側邊欄區域樣式，參考 Element Plus 官方側欄 */
.aside-menu {
background: var(--el-color-primary-light-9, #f5f7fa); /* 默認淡色，也可自定義主題色 */
min-height: 100vh;
border-right: 1px solid #ebeef5; /* 視覺分隔線 */
/* 可按需添加 transition 支持折疊動畫 */
}
/* 頂部工具欄，樣式貼近 Element Plus 官方 Demo */
.header-bar {
background: #fff;
border-bottom: 1px solid #ebeef5;
box-shadow: 0 1px 4px rgba(0,21,41,0.04); /* 細微陰影增強層次 */
z-index: 100;
}
/* 主內容區，推薦采用留白設計，便于擴展儀表盤/表格/圖表等 */
.main-content {
padding: 24px;
background: #f5f6fa; /* 與 Element Plus 設計語言一致 */
min-height: 100%;
/* 可以加overflow-y: auto，支持內容溢出滾動 */
}
</style>
touch src/components/AppAsideMenu.vue
<template>
<!--
AppAsideMenu 組件 —— 系統側邊多級導航菜單
- 采用 Element Plus <el-menu> 及 <el-sub-menu> 實現多級菜單結構
- 支持路由自動高亮，icon與菜單文本自定義
- 可作為權限系統和國際化菜單的基礎
- 推薦后期用配置數據+遞歸渲染（此Demo為手寫靜態結構，易理解）
-->
<el-menu
:default-active="activeMenu" <!-- 當前路由對應菜單自動高亮 -->
class="el-menu-vertical-demo" <!-- 自定義樣式class -->
background-color="#f5f7fa" <!-- 菜單背景色，與EP官方一致 -->
text-color="#333" <!-- 默認文字顏色 -->
active-text-color="#409EFF" <!-- 選中項高亮色（EP主色） -->
:collapse="false" <!-- 是否折疊菜單，支持響應式 -->
router <!-- 啟用路由模式，點擊菜單自動跳轉 -->
>
<!-- 一級菜單，含圖標及文本 -->
<el-sub-menu index="1">
<template #title>
<el-icon><Menu /></el-icon>
<span>主導航</span>
</template>
<!-- 二級菜單：首頁（直接跳轉到 /） -->
<el-menu-item index="/">首頁</el-menu-item>
<!-- 二級菜單：帶三級子菜單的演示 -->
<el-sub-menu index="1-2">
<template #title>
<el-icon><Setting /></el-icon>
<span>系統設置</span>
</template>
<!-- 三級菜單項，可按需擴展 -->
<el-menu-item index="/setting1">設置1</el-menu-item>
<el-menu-item index="/setting2">設置2</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<!-- 其它一級或多級菜單項，可繼續添加 -->
<!--
<el-menu-item index="/profile">
<el-icon><User /></el-icon>
<span>個人中心</span>
</el-menu-item>
-->
</el-menu>
</template>
<script setup lang="ts">
/**
* AppAsideMenu.vue
* - 項目側邊多級菜單組件
* - 支持動態路由高亮、圖標自定義、權限拓展
* - 推薦后續遞歸化和配置驅動
*/
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { Menu, Setting } from '@element-plus/icons-vue' // Element Plus官方icon
// 1. 獲取當前路由信息（用于菜單高亮）
const route = useRoute()
// 2. 計算當前激活菜單項（以route.path為基準，確保跳轉/刷新自動同步高亮）
const activeMenu = computed(() => route.path)
// 3. 推薦擴展：
// - 菜單項數組 + 遞歸渲染（適配權限/多語言）
// - 支持 collapse 響應式收縮（如引入左側折疊功能）
// - 可注入用戶角色實現動態菜單
</script>
<style scoped>
/* 側邊菜單整體樣式 */
.el-menu-vertical-demo {
border-right: none; /* 視覺簡潔，無右側邊線 */
min-height: 100vh; /* 高度撐滿側邊 */
width: 100%; /* 占滿aside寬度 */
background: inherit; /* 跟隨外層背景，可自定義主題 */
}
/* 圖標與文本的間距優化（EP官方推薦8px） */
.el-menu .el-icon {
margin-right: 8px;
}
</style>
touch src/components/AppHeaderBar.vue
<template>
<!--
AppHeaderBar 組件 —— 頂部全局工具欄
1. 左側：可放Logo、系統標題、面包屑等
2. 右側：用戶區（頭像+用戶名+下拉菜單）、全局操作（如設置、切換主題、通知等）
3. 推薦所有交互通過props/inject/Pinia進行解耦
4. 業務區塊可通過slot拓展
-->
<div class="header-bar-inner">
<!-- 左側區域：Logo/系統名（可改成slot） -->
<div class="left">
<span class="title">企業管理平臺</span>
</div>
<!-- 右側區域：用戶/操作區 -->
<div class="right">
<!-- 用戶頭像，可換成后端頭像或本地上傳 -->
<el-avatar size="small" style="margin-right: 8px;">
<!-- 推薦用后端下發URL或第三方圖像生成器 -->
<img src="https://api.dicebear.com/8.x/pixel-art/svg?seed=user" alt="avatar" />
</el-avatar>
<!-- 用戶名（可用pinia或props注入） -->
<span style="margin-right: 16px;">{{ user.name }}</span>
<!-- 用戶操作下拉菜單：個人中心、登錄/登出、設置等 -->
<el-dropdown>
<span class="el-dropdown-link">
操作 <el-icon><ArrowDown /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="toProfile">個人中心</el-dropdown-item>
<!-- 登錄/登出根據狀態切換 -->
<el-dropdown-item divided v-if="user.isLoggedIn" @click="logout">登出</el-dropdown-item>
<el-dropdown-item v-else @click="login">登錄</el-dropdown-item>
<el-dropdown-item @click="openSettings">設置</el-dropdown-item>
<!-- 可繼續添加國際化/主題切換等全局操作 -->
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
/**
* AppHeaderBar.vue
* - 頂部全局工具欄組件
* - 最大化注釋，Google級工程可擴展性
* - 所有用戶與操作均解耦（可接pinia、props或inject）
*/
import { useUserStore } from '@/store/useUserStore' // 推薦全局pinia管理用戶信息
import { ArrowDown } from '@element-plus/icons-vue'
const user = useUserStore()
// 用戶登錄（可換成彈窗或跳OAuth）
const login = () => user.login('張三')
// 用戶登出
const logout = () => user.logout()
// 跳個人中心（路由跳轉或彈窗，具體業務接入）
const toProfile = () => {
// 這里可用router.push('/profile')或emit事件
}
// 打開設置（建議彈窗或跳轉設置頁）
const openSettings = () => {
// 打開設置彈窗/頁面
}
</script>
<style scoped>
.header-bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%; /* 撐滿header高度 */
}
.title {
font-weight: 700;
font-size: 20px;
color: #333;
letter-spacing: 1px;
}
.right {
display: flex;
align-items: center;
}
/* el-avatar/下拉等可自行美化 */
</style>
touch src/views/AppHome.vue
<template>
<!--
AppHome 組件 —— 首頁內容區
1. 歡迎區：顯示當前用戶信息與典型操作按鈕
2. 典型按鈕示例：演示EP主按鈕/默認/危險等
3. Table樣例：可直接擴展為業務表格
4. 所有內容布局留有擴展空間，便于后續嵌入圖表/分析/卡片等
-->
<div class="home-box">
<!-- 歡迎欄及右側操作按鈕 -->
<el-row :gutter="24" class="mb-4">
<el-col :span="12">
<h2>歡迎，{{ userStore.displayName }}！</h2>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button type="primary" @click="refreshUser">刷新用戶信息</el-button>
<el-button type="success" @click="addChart" class="ml-2">顯示圖表</el-button>
</el-col>
</el-row>
<!-- 典型按鈕示例區 -->
<el-card class="mb-4">
<h3>典型按鈕示例</h3>
<el-button type="primary" class="mr-2">主要按鈕</el-button>
<el-button>默認按鈕</el-button>
<el-button type="danger" class="ml-2">危險按鈕</el-button>
</el-card>
<!-- Table 樣例區 -->
<el-card>
<h3>Table 樣例</h3>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</el-card>
</div>
</template>
<script setup lang="ts">
/**
* AppHome.vue
* - 首頁內容區/儀表盤
* - 展示典型按鈕、表格，預留后續擴展入口
* - 與用戶Pinia狀態聯動（如用戶信息刷新）
* - 兼容新Store結構，業務store全部按modules分文件
*/
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user' // 新結構的用戶Store
const userStore = useUserStore()
/**
* 刷新用戶信息
* 調用store action（一般實際會發起API請求）
*/
const refreshUser = () => userStore.fetchUser()
/**
* 顯示圖表
* 實際項目可彈窗/跳轉或渲染圖表組件
*/
const addChart = () => {
// TODO: 集成圖表組件（如ECharts）
}
// 表格數據樣例，可直接擴展為API動態獲取
const tableData = ref([
{ date: '2023-05-22', name: '張三', address: '上海市普陀區金沙江路' },
{ date: '2023-05-21', name: '李四', address: '北京市海淀區西二旗' },
{ date: '2023-05-20', name: '王五', address: '廣州市天河區體育西路' }
])
</script>
<style scoped>
.home-box {
padding: 20px;
background: #fff;
border-radius: 8px;
}
.mb-4 {
margin-bottom: 24px;
}
.ml-2 {
margin-left: 8px;
}
.mr-2 {
margin-right: 8px;
}
</style>
touch src/router/index.ts
/**
* index.ts
* 路由主入口（Google級模塊化，最大化注釋）
* 1. 按modules分文件解耦業務路由，方便維護和權限擴展
* 2. 自動合并所有模塊路由，支持無限擴展
* 3. 掛載全局主布局，所有頁面默認走統一布局
*/
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 1. 按模塊導入路由
import homeRoutes from './modules/home'
import systemRoutes from './modules/system'
// import profileRoutes from './modules/profile' // 可繼續擴展
// 2. 主路由結構（包含主布局和子頁面）
// - 所有頁面都在MainLayout下渲染，子路由負責頁面內容
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import('@/layouts/MainLayout.vue'),
children: [
...homeRoutes, // 首頁
...systemRoutes, // 系統設置
// ...profileRoutes, // 其它模塊
// 可擴展更多業務模塊
]
}
// 可擴展如login/404等特殊路由，不走主布局
]
// 3. 創建路由實例，使用HTML5 History模式
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
mkdir src/router/modules
touch src/router/modules/home.ts
/**
* home.ts
* 首頁相關路由配置（可按需擴展更多子頁面）
*/
import { RouteRecordRaw } from 'vue-router'
const homeRoutes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: () => import('@/views/AppHome.vue'),
meta: {
title: '首頁',
icon: 'Menu' // 方便和菜單系統關聯
}
}
]
export default homeRoutes
touch src/router/modules/system.ts
/**
* system.ts
* 系統設置相關路由（可對應Element Plus多級菜單中的系統設置）
*/
import { RouteRecordRaw } from 'vue-router'
const systemRoutes: RouteRecordRaw[] = [
{
path: '/system',
name: 'System',
component: () => import('@/layouts/MainLayout.vue'), // 復用主布局
meta: {
title: '系統設置',
icon: 'Setting'
},
children: [
{
path: 'setting1',
name: 'SystemSetting1',
component: () => import('@/views/SystemSetting1.vue'),
meta: { title: '設置1' }
},
{
path: 'setting2',
name: 'SystemSetting2',
component: () => import('@/views/SystemSetting2.vue'),
meta: { title: '設置2' }
}
]
}
]
export default systemRoutes
mkdir src/store/types && touch src/store/types/user.ts
/**
* 用戶模塊相關類型
* 按Google級標準獨立維護，便于多人協作和類型擴展
*/
export interface UserInfo {
id: string
name: string
email: string
avatarUrl?: string
isLoggedIn: boolean
// 可擴展如角色、權限、token等
}
mkdir src/store/modules && touch src/store/modules/user.ts
/**
* 用戶模塊 Pinia Store
* - 最大化注釋，適合中大型項目
* - 所有類型全部引自 types
* - 推薦actions僅做狀態變更和業務分發，異步API獨立service層
*/
import { defineStore } from 'pinia'
import type { UserInfo } from '../types/user'
/**
* 推薦：state用工廠函數返回，避免全局狀態污染
*/
export const useUserStore = defineStore('user', {
// 1. State: 用戶基本信息，登錄狀態等
state: (): UserInfo => ({
id: '',
name: '訪客',
email: '',
avatarUrl: '',
isLoggedIn: false
}),
// 2. Actions: 所有業務相關操作（登錄、登出、拉取用戶信息等）
actions: {
/**
* 用戶登錄
* @param info 用戶信息對象（建議后端返回后再保存）
*/
login(info: Omit<UserInfo, 'isLoggedIn'>) {
this.id = info.id
this.name = info.name
this.email = info.email
this.avatarUrl = info.avatarUrl
this.isLoggedIn = true
},
/**
* 用戶登出（重置所有用戶信息）
*/
logout() {
this.id = ''
this.name = '訪客'
this.email = ''
this.avatarUrl = ''
this.isLoggedIn = false
},
/**
* 拉取用戶信息（通常配合API異步獲取，推薦實際業務中封裝獨立service）
*/
async fetchUser() {
// TODO: 調用真實接口，以下為模擬數據
const res = {
id: '1',
name: '張三',
email: 'zhangsan@example.com',
avatarUrl: 'https://api.dicebear.com/8.x/pixel-art/svg?seed=user'
}
this.login(res)
}
},
// 3. Getters: 推薦分文件復雜業務單獨抽取
getters: {
/**
* 用戶昵稱首字母大寫
*/
displayName: (state): string => state.name ? state.name.charAt(0).toUpperCase() + state.name.slice(1) : '訪客'
}
})
總結
以上是生活随笔為你收集整理的ElementPlus插件的安装和使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 37.1K star！MCP爆火后，这个
- 下一篇： codeup之C语言11.1 + C语言