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
查看评论