后台管理系统的布局一直中规中矩，对于一个后端工程师，对前端知识也需要有一定的了解。下面介绍一下自己用vue做的一个后台模板，主要是方便自己以后的使用。

先对页面的结果做一下分析，首先可以看到上边是公司的logo和个人头像，下边分为两个部分，左边是导航栏，右边是点击导航后展示的Tab选项卡。这里没有做点击导航时右边直接展示详情页，主要是因为实际中我们可能更喜欢选项卡这种方式，方便同时打开多个管理页面。

主要实现代码如下图所示，这里有四个文件：

Layout.vue：布局组件，完成基本的布局结构，同时负责协调组件通信；
Main.vue：选项卡组件，完成选项卡的具体功能；
Nav.vue：导航组件，完成导航功能；
Top.vue：顶部布局组件，完成顶部的布局。

另外，还有Goods.vue，这个组件主要展示商品的详情，当点击导航栏中的“编辑商品”按钮后，选项卡组件中就会添加一个该组件。

推荐阅读：vue组件间通信六种方式

1. 在标签 el-tabs 中使用组件作为 content

模板：

<el-tabs v-model="editableTabsValue" type="border-card" @edit="removeTab" closable style="height: 100%;"><el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title" :name="item.name"><tab-component :is=item.content></tab-component></el-tab-pane>
</el-tabs>

引入组件：

import tableTab from '@/components/main/tabs/TableTab'

并注册为子组件：

components: {tableTab
}

使用组件

editableTabs: [{title: '对象',name: '1',content: 'tableTab'
}]

2. 组件之间的通信

2.1 删除选项卡功能

为了完成Main组件和Layout组件的双向数据绑定，本文做法：

父组件（Layout组件）调用子组件（Main组件）传值，子组件通过props接收父组件传来的值，并通过emit发送方法名和值，父组件根据传来的方法名定义方法接收值并进行赋值操作，详情请移步。

如下图所示，父组件Layout向子组件Main传入数据 tabData。

当子组件Main中某一个选项卡将要被删除时，则可以通过this.$emit('tabDeleted', targetName)通知Layout父组件删除选项卡，Layout组件接收到通知后将会执行绑定的事件处理方法执行更新。这里你可以做一些额外的操作，例如：仅能删除处于选中状态的选项卡。具体做法是：首先，判断当前需要删除的选项卡是否处于被选中状态，如果是则删除相应的选项卡数据；否则，不做任何处理。

2.2 导航点击功能

在点击Nav组件时，需要通知Layout组件添加选项卡。注意，应当避免同一个组件被打开两次，Layout组件需要判断当前组件是否已经打开，若是，则直接定位选中该选项卡；否则，通知Main组件添加选项卡。因为上一节中已经完成了数据的双向绑定，所以这里只需要更改相关的数据即可。

2.3 添加选项卡功能

值得注意的是，为了将所有的其他模块统一在Main组件中注册和管理，这里所有需要通过选项卡展示的模块统一注册到Main组件中。

特别注意：

注册需要在选项卡中显示的组件
创建选项卡时指定要组件的名称要和注册时保持一致

本文没有介绍更改选中的选项卡功能的实现。虽然这个功能可以通过和删除选项卡功能比较类似的做法实现。但是，实践表明，框架已经帮我们实现了，我们可以不关心这一点。

另外，推荐学习一下vue中watch方式实现数据监听。

Vue后台管理系统简单实现相关推荐

VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路权限管理无非前端或者后台解决先说一下前端解决的思路:在设 ...
正确姿势开发vue后台管理系统
项目地址 vue-admin-webapp 欢迎star,fork 前言相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter .vuex .vue-cli.es ...
12款vue后台管理系统（可下载）
vue官方的后台管理仪表盘框架是:vue-admin,除此之外还有很多其他优秀的后台管理集成框架,正所谓前人栽树,后人乘凉.特此记录一下,方面以后要用. 参考下载地址:12款优秀的vue后台管理系统模 ...
哔哩哔哩Allen前端vue后台管理系统笔记
哔哩哔哩Allen前端vue后台管理系统笔记 Element ui 引入全局引入按需引入嵌套路由左侧菜单栏的样式 Container布局,左侧菜单栏commonAside组件 commonAs ...
vue后台管理系统搭建
vue后台管理系统搭建前提安装node.js 控制台安装yarn:npm install -g yarn 查看yarn版本:yarn --version 注:-g表示的是全局安装淘宝镜像安装:n ...
一套通用的VUE后台管理系统方案（vite+Vue3+ts）
通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可配置性也非常高,几乎能够满足前端工程化的所有要求 ...
看看人家 SpringBoot + vue后台管理系统，多么优雅...
如何写一个优雅的项目?为了让更多人学习前后端分离项目,特意录制了一个基于Spring security + Jwt + Vue的前后端分离后台管理系统VueAdmin,手把手完整教学,另外还写了两篇完 ...
vue后台管理系统实践方案总结(一)
项目概述基本业务概述根据不同的应用场景,电商系统一般都提供了PC端.移动APP.移动Web.微信小程序等多种终端访问方式管理系统功能电商后台管理系统用于管理账号.商品分类.商品信息.订单.数据 ...
vue后台管理系统打包上线到node
项目准备 1. 配置 alias 别名使用vue-cli开发项目,最大特色是组件化.组件中频繁引用其他组件或插件.我们可以把一些常用的路径定义成简短的名字.方便开发中使用. //加载path模块 c ...

Vue后台管理系统简单实现