飞道的博客

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

308人阅读  评论(0)

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 自适应布局(根据屏幕大小自动切换布局界面)

基础设置

右上角设置图标触发

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


使用方法

#克隆项目
git clone https://github.com/enncy/enncy-admin.git
#下载依赖
npm install
#运行项目
npm run serve

转载:https://blog.csdn.net/qq_31254489/article/details/116808606
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场