关键词：
文章目录
相关链接
参考视频：VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目
| 案例 | 链接 |
|---|---|
| 【前端】Vue+Element UI案例：通用后台管理系统-导航栏（视频p1-16） | https://blog.csdn.net/karshey/article/details/127640658 |
| 【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠（p17-19） | https://blog.csdn.net/karshey/article/details/127652862 |
| 【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格（p20-22） | https://blog.csdn.net/karshey/article/details/127674643 |
| 【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战（p23-25） | https://blog.csdn.net/karshey/article/details/127735159 |
| 【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图（p27-30） | https://blog.csdn.net/karshey/article/details/127737979 |
| 【前端】Vue+Element UI案例：通用后台管理系统-面包屑、tag栏（p31-35） | https://blog.csdn.net/karshey/article/details/127756733 |
| 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出（p36-38） | https://blog.csdn.net/karshey/article/details/127787418 |
| 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框（p39-42） | https://blog.csdn.net/karshey/article/details/127777962 |
| 【前端】Vue+Element UI案例：通用后台管理系统-登陆页面Login（p44） | https://blog.csdn.net/karshey/article/details/127795302 |
| 【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出（p45-46） | https://blog.csdn.net/karshey/article/details/127849502 |
| 【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由（p47-48） | https://blog.csdn.net/karshey/article/details/127865621 |
前言
这个项目做了半个月，这半个月里我从一个只了解vue相关语法规则的小白变成了稍微熟悉vue的小白，在写项目的时候熟悉了（包括但不限于）：组件化思想、axios、mock、cookie、vue-router、ElementUI。
在写项目过程中，以前只是匆匆掠过或了解的知识通过项目的实际运用变得生动了起来，很多知识知其然更知其所以然了。从p1-p47，我们是从项目的每个小部分开始，慢慢拼成一个项目。接下来我们将从上到下地纵览这个项目。
效果
我们先看看项目长成啥样：
登录页
首页
我们有两个用户：admin和xiaoxiao
admin：
username:admin
password:admin
xiaoxiao：
username:xiaoxiao
password:xiaoxiao
管理员的首页
导航栏收起：
xiaoxiao的首页
左侧菜单只有两个选项。
用户管理
页面：
点击新增：
点击编辑：
总结
项目搭建
整个项目的依赖：
"dependencies":
"axios": "^1.1.3",
"core-js": "^3.8.3",
"echarts": "^5.1.2",
"element-ui": "^2.15.10",
"js-cookie": "^3.0.1",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"mockjs": "^1.1.0",
"vue": "^2.6.14",
"vue-router": "^3.6.5",
"vuex": "^3.6.2"
我们要搭建一个通用后台管理系统，它会有以下的页面：
- 首页
- 商品管理
- 用户管理
- 其他
-
- 页面1
-
- 页面2
点击导航栏会显示不同的页面：
- 点击首页
- 点击商品管理
显然，变化的页面不包括左侧导航栏和上侧头部部分。于是：
- 把左侧和上侧单独写在一个组件，放入Main中，这样它们就会一直存在
- 点击左侧导航栏显示不同页面：
router-view与路由跳转 - 项目搭建好之后，在不同组件中添加想要的效果即可
对应链接：【前端】Vue+Element UI案例：通用后台管理系统-导航栏
左侧：CommonAside
这里写的是导航栏：
- 点击菜单跳转至对应页面：点击久路由跳转
- 用Element UI：把导航栏展开收起，点击悬停效果完成
对应链接：【前端】Vue+Element UI案例：通用后台管理系统-导航栏
上侧：CommonHeader和CommonTag
这里写的是Header和tag：
- 导航栏收起按钮：vuex
- 用户退出按钮：vuex、cookie
- 面包屑：Element UI
- tag：Element UI
对应链接：
【前端】Vue+Element UI案例：通用后台管理系统-Header+导航栏折叠
【前端】Vue+Element UI案例：通用后台管理系统-面包屑、tag栏
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出
首页：Home.vue
- 六个卡片：Element UI
- 三个图表：Echarts
- mock模拟数据
对应链接：
【前端】Vue+Element UI案例：通用后台管理系统-Echarts图表：折线图、柱状图、饼状图
用户管理：User.vue
- mock模拟用户数据
- table表格
- Form表单
- Dialog对话框
- Message消息提示
- Pagination分页
- 数据增删查改
对应链接：
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
登录页：Login.vue
- Form表单
- 导航守卫、不同用户的权限、动态添加路由
- token、cookie、mock
对应链接：
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面Login
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
总代码
git的运用还不是太熟练，把写的比较好的项目版本搞没了。写的一般的版本：
链接：https://pan.baidu.com/s/1oTVBn8Hq3jLzEWbWCDJYEg
提取码：5yt7
前端vue+elementui案例：通用后台管理系统-header+导航栏折叠(代码片段)
...dex.jsstore的tab.js效果参考目标上一篇：【前端】Vue+ElementUI案例：通用后台管理系统-导航栏代码0.创建组件创建组件CommonHeader 查看详情
前端vue+elementui案例：通用后台管理系统-登陆不同用户显示不同菜单动态添加路由(代码片段)
...ff0c;前端面试，前端面试项目案例链接【前端】Vue+ElementUI案例：通用后台管理系统-导航栏（视频p 查看详情
前端vue+elementui案例：通用后台管理系统-导航栏(代码片段)
文章目录目标代码0.数据1.其他准备2.结构3.动态显示数据4.主题：背景色，点击悬停效果5.去除padding6.去除下拉框7.标题8.路由跳转总代码组件CommonAside.vue文件结构参考目标悬停效果点击效果其他：点击展开和收缩动态... 查看详情
前端vue+elementui案例：通用后台管理系统-echarts图表：折线图柱状图饼状图(代码片段)
...a;videoData总效果总代码:Home.vue上一篇：【前端】Vue+ElementUI案例：通用后台管理系统-Echarts图表准备：axios封装、mock数据模拟实战目标左边&#x 查看详情
前端vue+elementui案例：通用后台管理系统-home组件：卡片表格(代码片段)
文章目录目标代码0.布局1.左上User卡片2.左下table卡片2.1数据：TableData.js2.2table2.3代码优化：循环3.右上数据卡片3.1数据：CountData3.2结构3.3布局3.4样式总代码Home.vue参考目标红框内部分都是卡片，鼠标悬停会有阴影左... 查看详情
前端vue+elementui案例：通用后台管理系统-面包屑tag栏(代码片段)
文章目录目标代码0.创建组件、完成路由1.面包屑2.用Vuex完成数据的通信：从Aside和Header到面包屑和tag3.面包屑样式4.tag栏结构5.tag事件6.tag样式效果总代码本篇修改或新建的文件CommonTags.vuetab.jsrouter的index.js目标点击左边的tab栏&... 查看详情
前端vue+elementui案例：通用后台管理系统-登陆页面功能：登录权限跳转路由守卫退出(代码片段)
文章目录目标代码0.准备：Cookie安装、后端验证的接口、mock和api0-1：登录页面的帐号密码1.表单提交功能：若成功则跳转并保存cookie2.导航守卫3.退出删除token总代码本篇修改或新建的文件0-permission.jsLogin.vue参考视频... 查看详情
前端vue+elementui案例：通用后台管理系统-echarts图表准备：axios封装mock数据模拟实战(代码片段)
文章目录axios封装请求首页数据mock模拟数据mock相关数据tableData柱状图：userData饼图：videoData效果总代码axios封装axios中文文档安装：npminstallaxios在src下创建一个新文件夹utils，创建文件request.js，我们在这里面封... 查看详情
前端vue+elementui案例：通用后台管理系统-用户管理：form表单填写dialog对话框弹出(代码片段)
文章目录目标代码0.页面结构1.新增按钮和弹出表单：结构2.新增按钮和弹出表单：点击新增弹出表单3.表单样式4.表单验证5.表单的提交和取消功能：接口、mock相关准备6.表单的提交和取消功能提供的数据和接口1-operate... 查看详情
laravel9+vue+elementui通用后台管理系统
项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情
laravel9+vue+elementui通用后台权限管理系统
项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情
springboot+vue+elementui实现后台管理系统模板--前端篇：使用vue-router进行动态加载菜单
SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（六）：使用vue-router进行动态加载菜单阅读目录一、获取动态菜单数据1、介绍2、使用mock模拟返回动态菜单数据3、动态菜单数据国际化问题... 查看详情
vue2.0+elementui后台管理系统
vue2.0和elementui 搭建的一个后台管理系统概述： 这是一个用vuejs2.0和element搭建的后台管理界面。 技术栈： vue2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。 element ui：基于vue2.0... 查看详情
springboot+vue+elementui实现后台管理系统模板
...求3、引入mock 前提：（1）相关博文地址：SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y 查看详情
springboot+vue+elementui实现后台管理系统模板--后端篇：数据表设计使用jwtredissms工具类完善注册登录逻辑(代码片段)
（1）相关博文地址：SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.htmlSpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（二）：引入element-ui定义基本页面显示：https://w... 查看详情
一个后台管理平台,用vue+elementui写的,有个附件上传之后,下载不下来
参考技术A一个后台管理平台,用vue+elementUI写的,有个附件上传之后,下载不下来方法：修改一下格式。管理软件平台，是企业现实运营中使用的有形和无形相结合的管理体系。 查看详情
laravel9+vue+elementui管理后台源码
项目介绍一款PHP语言基于Laravel9.x、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前... 查看详情
java项目:校园跑腿管理系统(java+springboot+vue+maven+elementui+mysql)
前端使用的是vue+elementui,这款系统只适合学习巩固SpringBoot+VUE,后面还要在这上面加校园公告、校园零食等功能，后期代码我也会持续更新上去。系统分为管理员和学生、学生是管理员后台添加的两种角色。运行环境:后... 查看详情