前言

Element UI 作為一個基于 Vue.js 的 UI 組件庫,提供了豐富的界面元素和交互組件,大大提高了開發效率。結合這兩大前端技術棧,開發者能夠快速搭建出一個功能強大、界面優雅的管理系統。

由于管理系統實現流程還是相對較多，所以分幾篇文章進行講解

本章主要先將整體的頁面寫出，后續再繼續補充細節部分

Element UI：一個 Vue 3 UI 框架 | Element Plus (element-plus.org)

實現

效果展示

安裝

首先安裝element-ui的依賴

npm install element-plus --save

將依賴引入項目main.js

import { createApp } from "vue";
import { createPinia } from "pinia";
import "@/assets/reset.css";import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";const app = createApp(App);app.use(createPinia());
app.use(router);
app.use(ElementPlus);app.mount("#app");

App.vue

<template><div><RouterView /></div>
</template><script setup>
import { RouterView } from "vue-router";
</script><style lang="css" scoped></style>

app.vue頁面只留一個路由出口

Login.vue

<div class="login"><div class="login-wrap"><h1>后臺管理系統</h1><el-row><el-input v-model="state.account" placeholder="請輸入賬號" /></el-row><el-row><el-inputv-model="state.password"type="password"placeholder="請輸入密碼"show-password/></el-row><el-row><el-button type="success" round @click="login">登錄</el-button><el-button type="primary" round>注冊</el-button></el-row></div></div>

1. 整體結構:

   • 整個登錄界面包裹在一個 div 元素中,類名為 login。
   • 登錄表單部分包裹在 div.login-wrap 中。
   • 頁面標題 “后臺管理系統” 使用 h1 標簽顯示。

2. 表單元素:

   • 賬號輸入使用 el-input 組件,v-model 綁定 state.account 變量。
   • 密碼輸入使用 el-input 組件,type 屬性設置為 password,show-password 屬性顯示密碼切換按鈕,v-model 綁定 state.password 變量。

3. 按鈕操作:

   • 登錄按鈕使用 el-button 組件,type 屬性設置為 success,round 屬性設置為圓角按鈕,@click 綁定 login 方法。
   • 注冊按鈕使用 el-button 組件,type 屬性設置為 primary,round 屬性設置為圓角按鈕。

import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";const state = reactive({account: "chen",password: "123456",
});const router = useRouter();
const login = () => {if (state.account === "chen" && state.password === "123456") {ElMessage({message: "登錄成功",type: "success",});router.push("/layout");} else {ElMessage({message: "登錄失敗",type: "error",});}
};

1. 狀態管理:

   • 使用 reactive 創建了一個名為 state 的響應式對象,包含 account 和 password 兩個屬性。

2. 路由管理:

   • 使用 useRouter 獲取了路由實例 router。

3. 登錄邏輯:

   • 定義了一個 login 函數,用于處理登錄操作。
   • 在函數內部,首先檢查 state.account 和 state.password 是否匹配預設的用戶名和密碼(“chen” 和 “123456”)。
   • 如果匹配成功,則使用 ElMessage 組件顯示成功提示,并使用 router.push 導航到 “/layout” 路由。
   • 如果匹配失敗,則使用 ElMessage 組件顯示失敗提示。

Layout.vue

<div class="common-layout"><el-container><el-header>Header</el-header><el-container><el-aside width="200px"><el-menudefault-active="2"class="el-menu-vertical-demo"router="true"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span style="color: white">人員管理</span></template><el-menu-item index="/home">首頁</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>歡迎</span></el-menu-item><el-menu-item index="3"><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu></el-aside><el-main><router-view /></el-main></el-container></el-container></div>

1. 整體結構:

   • 使用 el-container 組件作為整體容器,包含了 el-header 和嵌套的 el-container 組件。
   • 內部的 el-container 組件包含了 el-aside 和 el-main 組件。

2. 頭部區域:

   • el-header 組件用于顯示頭部區域,默認內容為 “Header”。

3. 側邊菜單:

   • el-aside 組件用于顯示側邊菜單欄,寬度設置為 200px。

   • 使用 el-menu 組件渲染側邊菜單,default-active 屬性設置當前選中的菜單項。

   • 菜單包含兩個一級菜單項:

     • “人員管理” 菜單項包含兩個二級菜單項:“首頁"和"item two”。
     • “歡迎”、"Navigator Three"和"Navigator Four"三個一級菜單項。

   • 使用 router 屬性開啟路由模式,當點擊菜單項時會自動跳轉到對應的路由頁面。

4. 主體內容區域:

   • el-main 組件用于顯示主體內容區域。
   • 使用 router-view 組件渲染當前路由對應的頁面內容。

路由設計

import { createRouter, createWebHistory } from "vue-router";
import Login from "../views/Login.vue";
import Layout from "../views/Layout.vue";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{// 默認路由path: "/",redirect: "/login",},{path: "/login",name: "Login",component: Login,},{path: "/layout",name: "Layout",component: Layout,},],
});export default router;

reset.css

reset.css 用于清除所有的默認樣式

在main.js使用到了。可以根據自己的路徑自行修改

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

總結

本文將詳細介紹如何使用 Vue.js 和 Element UI 快速構建頁面，希望對你有幫助！！！