項目地址：https://github.com/BaiFangZi/vue-antd-manage
預覽地址: http://baifangzi.gitee.io/vue-antd-manage/
vue3+vite版：
項目地址：https://github.com/BaiFangZi/vue3-antd-manage
預覽地址：https://baifangzi.gitee.io/vue3-antd-manage
目錄結構
├── mock # 項目mock 模擬數據
├── public # 靜態資源
│ │── favicon.ico # favicon圖標
│ └── index.html # html模板
├── src # 源代碼
│ ├── api # 所有請求
│ ├── assets # 主題 字體等靜態資源
│ ├── components # 全局公用組件
│ ├── directives # 全局指令
│ ├── filters # 全局 filter
│ ├── lang # 國際化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── utils # 全局公用方法
│ ├── views # views 所有頁面
│ ├── App.vue # 入口頁面
│ └── main.js # 入口文件 加載組件 初始化等
├── vue.config.js # vue-cli 配置
└── package.json # package.json
功能
權限驗證
- 頁面權限
- 指令權限
全局功能
-
中英文國際化
-
無限子級側邊欄
-
面包屑導航
-
路由頂部快捷導航
組件
- echart動態圖表
- 文件導出
- quill富文本編輯器
下面簡單對上面這些核心功能的代碼做一些解釋
代碼實現
頁面權限
頁面級別的權限通過路由信息中的auth屬性來進行判斷，這里存貯了用戶的角色，通過對應的角色來動態生成路由
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard'),
meta: {
title: 'dashboard',
icon: '',
auth: ['admin', 'normal'],
// isHidden: true,
},
},
每次進行路由跳轉時通過路由鈎子beforeEach來進行攔截處理，通過GENERATE_ROUTER遍歷所有路由，然后組件當前用戶能夠訪問的所有頁面
GENERATE_ROUTER(state, auth) {
const layout = constantRoutes.find((v) => v.path === '/')
const authRoutes = traversalRoutes(asyncRoutes, auth)
layout.children = state.menuList = authRoutes
constantRoutes.forEach((r) => router.addRoute(r))
},
指令權限
對於頁面中按鈕級別的權限。通過自定義指令v-has來實現
<a-button type="primary " class="per-btn" v-has="['admin','normal']">admin和normal的按鈕</a-button>
<a-button type="danger" class="per-btn" v-has="['admin']">admin的按鈕</a-button>
<a-button class="per-btn" v-has="['normal']">normal的按鈕</a-button>
國際化
vue-i18n插件可以方便的配置國際化
const i18n = new VueI18n({
locale: localStorage.getItem('lang') || 'zh', // set locale
messages: {
zh,
en,
},
})
<div>{{ $t('dashboard.content') }}</div>
使用時通過$t()找到對應的文本即可
在antdv框架中部分組件也需要進行國際化配置，只需要在組件外面配置一層<a-config-provider>即可
無限子級菜單
菜單結構與自定義的路由結一致，通過單文件遞歸組件生成，唯一的難點是如何格式話路由對象得到渲染menuTree所需要的的數據
export function formatMenu(data) {
const result = []
data.forEach((item) => {
const obj = {
icon: item.meta.icon,
title: item.meta.title,
path: item.path,
isHidden: item.meta.isHidden || false,//判斷一些路由是否需要隱藏，如<用戶中心>
}
if (item.children && item.children.length) { //有子路由遞歸
obj.children = formatMenu(item.children)
}
result.push(obj)
})
return result
}
面包屑導航
實現面包屑導航的關鍵是需要知道當前頁面路由的層級
這里有兩種實現方案：
-
通過this.$route.matched得到匹配的路徑（目前采用的方式）
-
在路由配置中。給路由元信息meta添加面包屑導航的配置，然后對breadcrumb進行處理得到想要的數據
{ name:..., path:... ... meta: { ...一些額外的參數信息 breadcrumb: [{ breadcrumbName: 'a', breadcrumbPath: '/a' }, { breadcrumbName: 'b', breadcrumbPath: '/b' }, { breadcrumbName: 'c', breadcrumbPath: '/c' }], }, }
快捷路由
這里自己封裝了這個組件，代碼有點多，不詳細展開了，但思路很簡單，用vuex存貯已經激活的路由，放入一個數組keepLiveTags中，打開/關閉路由來動態增刪keepLiveTags中的元素，主要邏輯在於顯示窗口過小時，如何控制標簽進行左右滑動
echarts動態圖表
圖表組件采用了百度的良心產品--Echarts，上手簡單，唯一痛處是圖表大小不能隨窗口改變，這里通過監聽resize事件來解決
window.addEventListener('resize', () => {
// console.log(this.chart)
if (this.chart) {
this.chart.resize()
}
})
文件導出
import { export_json_to_excel } from '@/plugins/Export2Excel'
文件導出功能通過 export_json_to_excel方法實現，具體使用可參考https://www.cnblogs.com/baifangzi/p/14140553.html
富文本編輯器
使用vue封裝的quill插件 ---vue-quill-editor
import { quillEditor } from 'vue-quill-editor'
<quill-editor v-model="content"></quill-editor> //content為輸入的內容
小結
抽空整理了之前寫的代碼，捋了捋一下項目思路，抽離出了這個模板，目前想實現的功能基本都已整合進項目，對於一些簡單項目可以使用該模板快速開發，后續可能會持續集成一些功能。該項目在一些開發規范上可能有些不足，代碼結構上缺少一些把控，這也是目前我正在努力完善的地方，歡迎各位指正。
另外感謝花褲衩老師的代碼，給了我很大的啟發。