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)