signed

QiShunwang

“诚信为本、客户至上”

enncy-admin ant design vue 后台管理系统脚手架

2021/5/14 23:37:35   来源:

github 项目地址 : https://github.com/enncy/enncy-admin

  • 参考 ant design vue pro 的界面布局设计
  • 除了基础布局,以及项目设置,暂未实现其他功能

项目结构

├── public
│	└── color.less			 # less 动态主题颜色修改文件
│   └── favicon.ico          # LOGO
|   └── index.html           # Vue 入口模板
├── src
│   ├── api                  # Api ajax 
│   ├── assets               # 本地静态资源
│   ├── config               # 项目基础配置,包含路由,全局设置
│   ├── components           # 业务通用组件
│   ├── router               # Vue-Router
│   ├── store                # Vuex
│   ├── utils                # 工具库
│   ├── views                # 业务页面入口和常用模板
│   ├── App.vue              # Vue 模板入口
│   └── main.js              # Vue 入口 
├── color.js				 # 自动编译 color.less 颜色修改文件
├── vue.config.js			 # vue 配置
├── README.md
└── package.json

关于 ant-design-vue 项目动态自定义主题颜色的教程 : https://blog.csdn.net/qq_31254489/article/details/116568895

项目依赖

  • vue-router
  • vuex
  • ant-design-vue
  • axios

基础布局

  • side: 侧边栏布局
    在这里插入图片描述

  • navigation : 导航栏布局
    在这里插入图片描述

  • small : 手机端布局
    在这里插入图片描述
    在这里插入图片描述

  • adapt 自适应布局(根据屏幕大小自动切换布局界面)

基础设置

右上角设置图标触发

  • 主题颜色设置
  • 菜单栏颜色设置
  • 成功,警告,错误主题颜色设置
  • 布局设置

在这里插入图片描述
在这里插入图片描述