VUE+Element-ui搭一个后台管理系统框架

最新推荐文章于 2024-05-16 02:32:16 发布
最新推荐文章于 2024-05-16 02:32:16 发布
阅读量2.3k 收藏 36
点赞数 4
分类专栏： VUE Element 文章标签： vue Element-UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rear0312/article/details/108467344
版权
VUE 同时被 2 个专栏收录
32 篇文章 3 订阅
订阅专栏
Element
16 篇文章 10 订阅
订阅专栏

拟实现整体布局

确定一下我们后台框架的整体布局，就来个基础经典的

再看下实现之后的效果：

接下来一步一步走：

1、webstorm新建项目

接下来就等系统创建好后直接npm run serve，我们得到了一个默认的vue项目

2、在项目中引入Element-UI

参考官方说明：

我们进行npm安装

安装完毕之后，我们在main.js中进行引入：

参考官方说明：

整体引入：

3、利用el-container设置页面布局

参考官方说明：

考虑到我们的页面布局是由三个部分组成的，所以我们新建一个文件夹mainframe专门存放基础布局的vue页面

 

思路：layout.vue设置布局，为方便后期维护，提取TopMenu.vue和Left.vue两个组件，并分别引入。最后App.vue指向layout.vue

各页面代码：

layout.vue

<template>
    <el-container>
        <el-header>
            <TopMenu></TopMenu>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <LeftMenu></LeftMenu>
            </el-aside>
            <el-main>
                <div style="border:1px solid red;">这里是主界面</div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

  import LeftMenu from "@/components/mainframe/LeftMenu";
  import TopMenu from "@/components/mainframe/TopMenu";

  export default {
    name: "TEMPLATE",
    components: {
      LeftMenu,
      TopMenu
    }
  }
</script>

<style scoped>

</style>

 

TopMenu.vue

<template>
    <div style="border:1px solid red;">
        这里是上
    </div>
</template>

<script>
  export default {
    name: "TEMPLATE"
  }
</script>

<style scoped>

</style>

 LeftMenu.vue

<template>
    <div style="border:1px solid red;">
        这里是左
    </div>
</template>

<script>
  export default {
    name: "TEMPLATE"
  }
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <layout></layout>
  </div>
</template>

<script>
import layout from "@/components/mainframe/layout";

export default {
  name: 'App',
  components: {
    layout
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注：为了方便看布局效果，我都设置了border

运行之后效果是这样的：哇哦，丑的好特别啊

4、利用el-menu设置顶栏和侧栏菜单样式

 

参考官方说明： 

layout.vue

<template>
    <el-container style="height:100%;width:100%;position:fixed;">
        <el-header style="padding:0;">
            <TopMenu></TopMenu>
        </el-header>
        <el-container style="height:calc(100% - 60px)">
            <el-aside style="background: rgb(84, 92, 100);"  width="200px">
                <LeftMenu></LeftMenu>
            </el-aside>
            <el-main>
                <div style="border:1px solid red;">这里是主界面</div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

  import LeftMenu from "@/components/mainframe/LeftMenu";
  import TopMenu from "@/components/mainframe/TopMenu";

  export default {
    name: "TEMPLATE",
    components: {
      LeftMenu,
      TopMenu
    }
  }
</script>

<style scoped>

</style>

TopMenu.vue:

<template>
    <div style="display:flex;flex-direction: row;justify-content: space-between;background:rgb(84, 92, 100);">
        <div style="height:60px;font-size: 18px;font-weight: bolder;color: gold;line-height: 60px;padding-left: 24px; ">
            {{systemName}}
        </div>
        <div>
            <el-menu default-active=""
                     background-color="#545c64"
                     class="el-menu-demo"
                     mode="horizontal"
                     text-color="#ffffff">
                <el-menu-item @click="toScreen">
                    <i class="el-icon-s-platform"></i>大屏展示
                </el-menu-item>
                <el-menu-item>
                    <el-dropdown trigger="click">
                        <div style="height:100%;">
                            <i class="el-icon-user"></i>
                            <span style="color:#fff">超级管理员</span>
                            <i class="el-icon-caret-bottom" />
                        </div>
                        <el-dropdown-menu>
                            <el-dropdown-item @click.native="resetPass">
                                <span style="display:block;">修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item @click.native="logout">
                                <span style="display:block;">退出系统</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
  export default {
    name: "TopMenu",
    data() {
      return {
        systemName: '我的后台管理系统',
      }
    },
    methods: {
    }
  }
</script>

<style scoped>
</style>

LeftMenu.vue:

<template>
    <div>
        <el-menu
                @close="handleClose"
                @open="handleOpen"
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                text-color="#FBFBFB"
                width="200px"
        >
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-user"></i>
                    <span>员工管理</span>
                </template>
                <el-menu-item index="1-1"><i class="el-icon-user-solid"></i>员工管理</el-menu-item>
                <el-menu-item index="1-2"><i class="el-icon-s-management"></i>部门管理</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="2-1"><i class="el-icon-s-custom"></i>角色管理</el-menu-item>
                <el-menu-item index="2-2"><i class="el-icon-menu"></i>菜单管理</el-menu-item>
                <el-menu-item index="2-3"><i class="el-icon-s-check"></i>用户管理</el-menu-item>
                <el-menu-item index="2-4"><i class="el-icon-s-claim"></i>权限管理</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
  export default {
    name: "TEMPLATE",
    data() {
      return {

      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
    /deep/ .el-submenu__title {
        width: 200px;
    }

    /deep/ .el-menu-item-group__title {
        width: 200px;
    }
</style>

此时的效果如下：

5、设置路由 

以前我们要实现路由跳转基本思路都是在click事件中用

this.$router.push({ path: "/screen" });

实现跳转。

但现在只需要用到el-menu的属性来使问题简单化 

 参考官方说明：

先安装npm install --save vue-router
 添加路由js

相关代码：

路由index.js如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);

import RoleManage from "@/components/views/RoleManage";
import UserManage from "@/components/views/UserManage";
import MenuManage from "@/components/views/MenuManage";
const routes = [
  {
    path: '/user',
    name: 'user',
    component: UserManage
  },
  {
    path: '/role',
    name: 'role',
    component: RoleManage
  },
  {
    path: '/menu',
    name: 'menu',
    component: MenuManage
  }
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
});


export default router

在main.js中引入路由

main.js完整代码：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

设置el-menu属性

LeftMenu.vue完整代码：

<template>
    <div>
        <el-menu
                @close="handleClose"
                @open="handleOpen"
                active-text-color="#ffd04b"
                background-color="#545c64"
                class="el-menu-vertical-demo"
                text-color="#FBFBFB"
                width="200px"
                router
        >
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-user"></i>
                    <span>员工管理</span>
                </template>
                <el-menu-item index="1-1"><i class="el-icon-user-solid"></i>员工管理</el-menu-item>
                <el-menu-item index="1-2"><i class="el-icon-s-management"></i>部门管理</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-setting"></i>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="/role"><i class="el-icon-s-custom"></i>角色管理</el-menu-item>
                <el-menu-item index="/menu"><i class="el-icon-menu"></i>菜单管理</el-menu-item>
                <el-menu-item index="/user"><i class="el-icon-s-check"></i>用户管理</el-menu-item>
                <el-menu-item index="2-4"><i class="el-icon-s-claim"></i>权限管理</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
  export default {
    name: "TEMPLATE",
    data() {
      return {

      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
    /deep/ .el-submenu__title {
        width: 200px;
    }

    /deep/ .el-menu-item-group__title {
        width: 200px;
    }
</style>

layout.vue 完整代码：

<template>
    <el-container style="height:100%;width:100%;position:fixed;">
        <el-header style="padding:0;">
            <TopMenu></TopMenu>
        </el-header>
        <el-container style="height:calc(100% - 60px)">
            <el-aside style="background: rgb(84, 92, 100);"  width="200px">
                <LeftMenu></LeftMenu>
            </el-aside>
            <el-main>
                <!--<div style="border:1px solid red;">这里是主界面</div>-->
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

  import LeftMenu from "@/components/mainframe/LeftMenu";
  import TopMenu from "@/components/mainframe/TopMenu";

  export default {
    name: "TEMPLATE",
    components: {
      LeftMenu,
      TopMenu
    }
  }
</script>

<style scoped>

</style>

关键点在于：

 

 TopMenu.vue代码同之前步骤，此处就不再赘述。

 6、最终实现效果：

 注：自动生成的项目总会有eslint，语法校验很严格，开发的时候很烦人，直接在package.json和package-lock.json与eslint相关的都删掉即可

菜鸟茜
关注
  • 4
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
基于 vue + element-ui 的后台管理系统
12-23
该项目是基于vue + element-ui的后台管理系统（企业级项目）。使用的技术包括：less、webpack、vuex、vue-router、element-ui。下载项目后可查看README.md文件，里面包含项目的启动信息等。在学习vue的同学，可以下载下来学习下。
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
weixin_39838829的博客
11-19 713
点击右上方红色按钮关注“web秀”，让你真正秀起来前言后台管理系统前端框架，现在很流行的形式都是，上方和左侧都是导航菜单，中间是具体的内容。比如阿里云、七牛云、头条号、百家号等等，他们的管理系统都是这样的。从零开始搭建 VUE + Element UI后台管理系统框架现在我们从零开始，给小伙伴们讲讲如何来搭建这样的一个前端页面框架，主要用到 VUE + Element UI。生成项目用Vue脚手架...
Vue + ElementUI 实现后台管理系统模板 -- 前端篇（三）：引入 element-ui 定义基本页面显示
最新发布
2401_84617731的博客
05-16 396
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：【官网：】【文档：】2》安装UI框架。使用 element-ui 用于实现页面的绘制。【安装方式一：（npm 安装）】【安装方式二：（CDN 方式引入）】引入样式。
elementplus实现左侧菜单栏收缩与展开
黎小小的博客
08-28 7415
Home.vue下包含aside.vue和menu.vue。
Vue+ElementUI 搭建后台管理系统（实战系列五）
前端视听
08-18 7947
前言 使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。 关于开发过程中，确实使用到很大一部分的文档，都说前端开发离不开文档，重要的话说三遍，一定要多看文档。 管理后台解决方案 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。 Star指数：69.7k Github 地址：https://github.com/Pa
Element Plus导航栏同时展开open和select方法的问题
byebukesi的博客
09-01 1212
Element Plus导航栏同时展开open和select方法的问题
解决el-drawer打开后，日期选择器随之打开的问题
Sunshine_Jian的博客
02-18 1271
场景：在el-drawer打开后，里面的日期选择器el-date-picker自动弹出； 解决办法: 1、第一步： el-date-picker 中:disabled="drawerShow" data(){ return {drawerShow:false} } 2、第二步： 在el-drawer中@open=“handleOpenDrawer” @close=“handleCloseDrawer” methods:{ handleOpen...
Vue实战开发--后台管理系统Vue+Element ui（3）
weixin_48878440的博客
05-27 2542
这节课开始页面布局
Vue + Element-ui后台管理系统模板.zip
06-04
这个“Vue + Element-ui后台管理系统模板”项目，利用 Vue CLI（Vue.js 的命令行工具）来初始化和管理项目。Vue CLI 提供了一套完整的脚手架，可以快速生成项目结构，包括路由、状态管理、单元测试等，使得开发者...
vue + element-ui+nodejs 商城管理系统源码.rar
10-27
商城管理系统源码，包含三部分： 1、node-elm 商城后台系统，提供数据。 技术栈：nodejs + express + mongodb + mongoose + es6/7 + vue + element-ui 2、vue2-manage 商城后台系统前端，跟node-elm是配套的 技术栈...
基于 vue + element-ui 的后台管理系统源码.zip
05-25
总的来说，"基于 vue + element-ui 的后台管理系统源码.zip"为开发者提供了一个现成的后台系统模板，利用Vue.js的灵活性和Element-UI的易用性，可以快速构建功能完善的管理平台。开发者只需熟悉这两个框架的基本概念...
vue+Element-UI 前端框架
02-15
在“vue+Element-UI”这个项目中，Vue.js 被用来作为基础框架，Element-UI 则是基于 Vue 的一套成熟的UI组件库，提供了丰富的界面元素和交互设计，使得开发者可以快速搭建企业级的后台管理系统。 1. **Vue.js**：...
基于Vue+Element UI的文件管理系统-Demo
weixin_51464636的博客
01-31 2092
记录一下之前写过的一个文件管理系统demo。功能包括文件夹的新增、删除、重命名及移动，文件的上传、删除、移动及下载功能。相关功能的操作直接和进行交互。因为该demo集成在大的系统中，懒得提取建库开源，所以算是只记录思路。
Vue + ElementUI 制作后台管理类项目
Ljj9889的博客
04-17 5644
历时2周左右，我终于完成了我的毕业项目。虽说页面不是特别美观，但是对于一个后端开发人员来说，我觉得已经是很不错了。今天主要分享前端页面的实现，以及如何对接后端的接口，先看项目效果。 一、页面展示 登录界面 管理界面 数据操作 二、代码展示 登录页代码 <template> <div class="login_page"> <div class="logo"> <div class="txt">九江</d
handleOpenUrl && openUrl
齐恒毅－博客专栏
12-01 2871
接着上篇的自定义URL scheme   在挂起和回调app的时候又遇到了问题、如下： handleOpenURL && openURL的不同 handleOpenURL是其它应用通过调用你的app中设置的URL scheme打开你的应用、例如做分享回调到自己app就调用这个方法； OpenURL是你通过打开一个url的方式打开其它的应用或链接、在支付或者分享
Vue相关使用
qq_45022585的博客
10-08 37
Vue相关使用 遍历时可以将方法一起遍历（即可以有对应的方法） v-for=“item in infoList” :key=“item.name” @click=“item.change()” 2.在同一个父组件中的子组件想要通信： 子组件内部：将要通信的方法emit到父组件， open() { this.$emit("open"); }, 父组件中接收： <FixedNavigation @open="open" @open2="open2"></FixedN
使用vue3+element-ui plus 快速构建后台管理模板
m0_63622279的博客
10-12 9390
使用vue3+element-ui plus 快速构建后台管理模板，分为侧边栏，顶部栏和内容区域三个块，前两个抽离为组件，内容区域使用routerview跳转即可，组件通信使用父子组件的通信方式。element ui plus 主要使用了 container布局容器以及icon图标。
超美观的 Vue+Element 开源后台管理 UI
公众号：逛逛GitHub
11-18 1007
EuiAdmin是基于Vue+Element等组件联合开发的一个免费的开源后台，你可以通过（euiadmin.com）进行下载和体验，此后台免费开源，可以直接免费使用。免费开源后台主要为...
vue3+element-ui后台管理模板
08-26
vue3 element-ui后台管理模板是一种用于构建现代化企业级后台管理系统的模板。它基于Vue.js 3框架和Element UI组件库开发，提供了丰富的可重用的UI组件和样式，方便开发人员快速搭建用户界面。 该模板采用了最新的Vue.js 3框架，具有更好的性能和更高的开发效率。它支持最新的ECMAScript 6标准和模块化开发，使代码更加模块化、可维护性更强。 Element UI是一套基于Vue.js的UI组件库，提供了丰富的UI组件，如表格、表单、弹窗、菜单等。这些组件具有统一的风格和交互效果，方便开发人员进行组件的组合和定制。 该模板还提供了一套完整的后台管理系统的布局和样式，包括侧边栏菜单、头部导航、面包屑导航等。这些布局和样式可以根据实际需求进行定制，方便开发人员快速构建出符合公司风格的后台管理系统。 除了UI组件和布局样式，该模板还集成了很多常用的功能和功能模块，如权限管理、数据表格、表单验证、路由管理等。这些功能和功能模块提供了一些通用的解决方案，方便开发人员进行快速开发和集成。 总体来说，vue3 element-ui后台管理模板是一种强大而灵活的工具，可以帮助开发人员快速构建现代化企业级后台管理系统。它提供了丰富的UI组件、布局样式和功能模块，可以大大提升开发效率和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟茜

随多随少随你心意^-^

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值