Vue 结合 Element-UI ，管理系统快速生成指南（一）

前言

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。
   • 登录表单部分包裹在 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-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>

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