福利来了:vaw-layouts,来不及解释了,赶紧上车

2022-10-25 21:30:11 浏览数 (1)

继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

0 人点赞