继vue-admin-work开源框架开发完之后,请多小伙伴问我,要怎么样快速搭建公司的后台管理系统。目前的解决方案是在 vue-admin-work的基础上进行删除无用的代码或者修改自己的需求。当了解了这一需求之后,我们想了一下也确实不方便,所以为了解决这一痛点 vaw-layouts项目就正式诞生了。
vaw-layouts 把一个后台管理系统的骨架和一些基本的业务逻辑抽离出来,当需要使用的时候直接在项目中引入然后再简单配置一下就可以了。
不过有一点需要注意的是:vaw-layouts项目内部还是使用的 vue2.x和 vue-router3.x、 element-ui作为支撑。所以想要使用这个项目的小伙伴,就得再提前引入使用这两个项目了。
项目目录结构
代码语言:javascript复制.
├── 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
主体功能
整体的布局
- 左右结构
- 上下结构
- 分栏结构
- 同时要支持手机,平板,电脑的响应式结构
多种主题
- 明亮主题
- 暗黑主题
- 蓝色菜单主题
- 黑色菜单主题
主题颜色
- 蓝
- 红
- 青
- 紫
侧边栏
- 普通样式
- 分栏样式
- 支持无限子级
顶部栏(导航栏和状态栏)
- 面包屑
- 动作按钮
- 用户状态
- 标签栏
主要内容区域(平时我们开发的页面主要显示区域)
快速开始
代码语言:javascript复制// 克隆代码
git clone https://github.com/qingqingxuan/vaw-layouts.git
// 进入目录
cd vaw-layouts
// 启动项目
npm run serve
体验地址
https://qingqingxuan.github.io/vaw-layouts/index.html