基于 Ant Design of Vue 实现的 Ant Design Pro。非常完善的开发后台系统,前台系统的代码样例。
github地址:
https://github.com/sendya/ant-design-pro-vue
项目预览地址:
https://preview.pro.loacg.com/user/login?redirect=%2F
文档地址:
https://pro.loacg.com/docs/getting-started
官方提供了权限的取消文档,要修改机构地方:
https://pro.loacg.com/docs/remove-authority-management
去除路由守卫
移除代码 src/main.js 第 10 行
import '@/permission' // permission control
让菜单生成不经过动态路由
修改 src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap, asyncRouterMap } from '@/config/router.config'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap.concat(asyncRouterMap)
})
增加 src/components/page/GlobalLayout.vue 第 79 行起
import { asyncRouterMap } from '@/config/router.config.js'
修改 src/components/page/GlobalLayout.vue 第 120 行起
created () {
this.menus = asyncRouterMap.find((item) => item.path === '/').children
// this.menus = this.mainMenu.find((item) => item.path === '/').children
this.collapsed = !this.sidebarOpened
},
这个路由设计的还配合权限设计的。
菜单是自动可以增加好多级的。
只修改配置文件:
src/config/defaultSettings.js 默认配置文件:
/**
* 项目默认配置项
* primaryColor - 默认主题色
* navTheme - sidebar theme ['dark', 'light'] 两种主题
* colorWeak - 色盲模式
* layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
* fixedHeader - 固定 Header : boolean
* fixSiderbar - 固定左侧菜单栏 : boolean
* autoHideHeader - 向下滚动时,隐藏 Header : boolean
* contentWidth - 内容区布局: 流式 | 固定
*
* storageOptions: {} - Vue-ls 插件配置项 (localStorage/sessionStorage)
*
*/
export default {
primaryColor: '#1890FF', // primary color of ant design
navTheme: 'light', // theme for nav menu
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: false, // sticky header
fixSiderbar: false, // sticky siderbar
autoHideHeader: false, // auto hide header
colorWeak: false,
multiTab: false,
// vue-ls options
storageOptions: {
namespace: 'pro__', // key prefix
name: 'ls', // name variable Vue.[ls] or this.[$ls],
storage: 'local' // storage name session, local, memory
}
}