前言
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-input
v-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>
整体结构:
- 整个登录界面包裹在一个 div 元素中,类名为 login。
- 登录表单部分包裹在 div.login-wrap 中。
- 页面标题 "后台管理系统" 使用 h1 标签显示。
表单元素:
1.账号输入使用 el-input 组件,v-model 绑定 state.account 变量。
2.密码输入使用 el-input 组件,type 属性设置为 password,show-password 属性显示密码切换按钮,v-model 绑定 state.password 变量。
按钮操作:
1.登录按钮使用 el-button 组件,type 属性设置为 success,round 属性设置为圆角按钮,@click 绑定 login 方法。
2.注册按钮使用 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",
});
}
};状态管理:
- 使用 reactive 创建了一个名为 state 的响应式对象,包含 account 和 password 两个属性。
- 使用 useRouter 获取了路由实例 router。
- 定义了一个 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-menu
default-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>
- 使用 el-container 组件作为整体容器,包含了 el-header 和嵌套的 el-container 组件。
- 内部的 el-container 组件包含了 el-aside 和 el-main 组件。
- el-header 组件用于显示头部区域,默认内容为 "Header"。
- el-aside 组件用于显示侧边菜单栏,宽度设置为 200px。
- 使用 el-menu 组件渲染侧边菜单,default-active 属性设置当前选中的菜单项。
- 菜单包含两个一级菜单项:
- "人员管理" 菜单项包含两个二级菜单项:"首页"和"item two"。
- "欢迎"、"Navigator Three"和"Navigator Four"三个一级菜单项。
- 使用 router 属性开启路由模式,当点击菜单项时会自动跳转到对应的路由页面。
- 主体内容区域:
- 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 快速构建页面，希望对你有帮助！！！
