目录
二、文档结构
src文件夹:
三、技术和插件
1、Vue router
2、element-ui框架
3、样式插件less
4、vuex状态管理
5、axios.js
6、mock.js模拟数据
7、echarts图表工具
四、项目效果展示
总结
一、项目介绍
通用后台管理是采用vue2+cli开发的项目,通过mock模拟后端数据,前端完成数据的渲染。本项目使用vue router实现各个页面的路由跳转,采用vuex状态管理器管理各个页面之间的数据传递问题,采用axios技术发出请求和接收请求。
二、文档结构
src文件夹:
-
assests:存放图片资源
-
components:通用组件,比如左侧导航菜单组件,header组件等
-
router:路由管理
-
views:存放页面组件
-
store:为处理组件之间的通信问题,异步处理问题,引入Vuex
-
utlis:存放工具,比如axios封装请求
-
api:存放后端的接口
三、技术和插件
1、Vue router
官网:安装 | Vue Router
官网:Vue Router | Vue.js 的官方路由
2、element-ui框架
element2官网:Element - The world's most popular Vue UI framework
element3官网:一个 Vue 3 UI 框架 | Element Plus
3、样式插件less
官方文档:Less 快速入门 | Less.js 中文文档 - Less 中文网
4、vuex状态管理
官网:Vuex 是什么? | Vuex
5、axios.js
官网文档:Axios.JS 中文文档
6、mock.js模拟数据
官网文档:Axios.JS 中文文档
7、echarts图表工具
官方文档:Apache ECharts
四、项目效果展示
1、登录页面:
2、管理员身份
管理员账号:admin
密码:123
首页:
用户管理界面
新增用户:
编辑用户:
3、普通用户身份
普通用户账号:abc
密码:111
首页:
总结
以上就是通用后台管理的项目介绍以及技术介绍。