前言

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 快速构建页面，希望对你有帮助！！！