继vue-admin-work开源框架开发完之后,请多小伙伴问我,要怎么样快速搭建公司的后台管理系统。目前的解决方案是在 vue-admin-work的基础上进行删除无用的代码或者修改自己的需求。当了解了这一需求之后,我们想了一下也确实不方便,所以为了解决这一痛点 vaw-layouts项目就正式诞生了。
vaw-layouts 把一个后台管理系统的骨架和一些基本的业务逻辑抽离出来,当需要使用的时候直接在项目中引入然后再简单配置一下就可以了。
不过有一点需要注意的是:vaw-layouts项目内部还是使用的 vue2.x和 vue-router3.x、 element-ui作为支撑。所以想要使用这个项目的小伙伴,就得再提前引入使用这两个项目了。
项目目录结构
. ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ ├── iconfont │ ├── logo.png │ ├── qrcode.jpg │ ├── styles │ └── work_logo.png ├── components │ ├── Layout.vue │ ├── Main.vue │ ├── MainLayout.vue │ ├── RouterViewLayout.vue │ ├── actions │ ├── avatar │ ├── breadcrumb │ ├── footer │ ├── header │ ├── humburger │ ├── index.js │ ├── logo │ ├── message │ ├── navbar │ ├── setting │ ├── sidebar │ ├── svg-icon │ └── tabbar ├── main.js ├── router │ └── index.js ├── store │ ├── index.js │ └── modules ├── utils │ └── index.js └── views ├── index ├── mall └── redirect
主体功能
整体的布局
- 左右结构
- 上下结构
- 分栏结构
- 同时要支持手机,平板,电脑的响应式结构
多种主题
- 明亮主题
- 暗黑主题
- 蓝色菜单主题
- 黑色菜单主题
主题颜色
- 蓝
- 红
- 青
- 紫
侧边栏
- 普通样式
- 分栏样式
- 支持无限子级
顶部栏(导航栏和状态栏)
- 面包屑
- 动作按钮
- 用户状态
- 标签栏
主要内容区域(平时我们开发的页面主要显示区域)
快速开始
// 克隆代码 git clone https://github.com/qingqingxuan/vaw-layouts.git // 进入目录 cd vaw-layouts // 启动项目 npm run serve
体验地址
https://qingqingxuan.github.io/vaw-layouts/index.html