前言

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>

整体结构:

1. 整个登录界面包裹在一个 div 元素中,类名为 login。
2. 登录表单部分包裹在 div.login-wrap 中。
3. 页面标题 "后台管理系统" 使用 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 属性开启路由模式,当点击菜单项时会自动跳转到对应的路由页面。
• 主体内容区域:

1. el-main 组件用于显示主体内容区域。
2. 使用 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 快速构建页面，希望对你有帮助！！！

页面布局