Vue + Element-ui实现后台管理系统(1) --- 总述

总述

一、项目效果 

整体效果

登陆页

后台首页

用户管理页

说明 这里所有的数据都不是直接通过后端获取的, 而是通过Mock这个工具来模拟后端返回的接口数据。

附上github地址： mall-manage-system

二、项目介绍

1、技术架构

项目总体技术选型

vue-cli 3.0 + element-ui + vue-router + axios +  Vuex + Mock + echarts

2、测试账号地址

访问地址: 47.99.203.55:6066

账号：admin 密码：admin

账号：xiaoxiao 密码：xiaoxiao

因为菜单是根据不同用户权限动态生成的，所以这里两个账户所看到的后台菜单是不一样的。

3、项目整体结构

mall-manage-system # 电商后台管理系统
|
---src
      |
      ---api
           |# axios实例 编写统一的请求响应拦截信息
            ---annotation
      ---assets # 存放静态资源和全局自定义样式
           |# 存放图片
            ---images
           |# 存放自定义样式
            ---scss
      --- components # 小组件 一般这里的都是可以复用的
           |#首页侧边栏
            ---CommonAside.vue
           |#首页头部
            ---CommonHeader.vue
           |# element-ui 封装成公共from组件
            ---CommonForm.vue
           |# element-ui 面包屑组件
            ---CommonTab.vue
           |# element-ui 封装成公共表格组件
            ---CommonTable.vue
           |# echarts 封装成公共图表组件
            ---EChart.vue
        --- mock #模拟后端接口 返回数据
           |
        --- router#路由配置信息
           |
        --- store #vuex配置信息
           |
        --- view # 页面级组件，一般复用性很低
           |# 首页相关组件
            ---Home
           |# 登陆页相关组件
            ---Login
           |# 用户管理相关组件
            ---UserManage
           |# 商品管理相关组件
            ---MallManage
           |# 主入口
            ---Main.vue
        --- App.vue
        --- main.js
        --- vue.config.js

4、说明

接下来会分五篇博客大致讲下这个项目一些核心代码的实现

1、项目搭建+使⽤element实现⾸⻚布局
2、顶部导航菜单及与左侧导航联动的⾯包屑实现
3、封装一个ECharts组件的一点思路
4、封装一个Form表单组件和Table表格组件
5、企业开发之权限管理思路讲解

别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(12)