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

总述

1、项目效果 

总体效果

登录页

后台首页

用户管理页

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

附上github地址： mall-manage-system

2、项目介绍

一、技术架构

项目整体技术选型

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

二、测试帐号地址

访问地址: 47.99.203.55:6066

帐号：admin 密码：admin

帐号：xiaoxiao 密码：xiaoxiao

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

三、项目总体结构

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

四、说明

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

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

别人骂我胖，我会生气，由于我内心认可了我胖。别人说我矮，我就会以为可笑，由于我内心知道我不可能矮。这就是咱们为何会对别人的攻击生气。
攻我盾者，乃我心里之矛(12)