ant-design-pro-vue-master 去掉权限 及配置

ant-design-pro-vue-master 去掉权限 及配置

基于 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
    },

这个路由设计的还配合权限设计的。
菜单是自动可以增加好多级的。

主题设置 setting-drawer

只修改配置文件:

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
  }
}




你可能感兴趣的:(vue,技术整理,vue)