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

简介: 继vue-admin-work开源框架开发完之后,请多小伙伴问我,要怎么样快速搭建公司的后台管理系统。目前的解决方案是在 vue-admin-work的基础上进行删除无用的代码或者修改自己的需求。当了解了这一需求之后,我们想了一下也确实不方便,所以为了解决这一痛点 vaw-layouts项目就正式诞生了。

vue-admin-work开源框架开发完之后,请多小伙伴问我,要怎么样快速搭建公司的后台管理系统。目前的解决方案是在 vue-admin-work的基础上进行删除无用的代码或者修改自己的需求。当了解了这一需求之后,我们想了一下也确实不方便,所以为了解决这一痛点 vaw-layouts项目就正式诞生了。

vaw-layouts 把一个后台管理系统的骨架和一些基本的业务逻辑抽离出来,当需要使用的时候直接在项目中引入然后再简单配置一下就可以了。

不过有一点需要注意的是:vaw-layouts项目内部还是使用的 vue2.xvue-router3.xelement-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

4edc953e2c684bbe819ffa954c899c08.png

相关文章
|
5月前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
46 0
|
7月前
|
搜索推荐
代码分享|GPL平台没有基因注释什么办?别慌,基因ID注释万能公式!
本文介绍了处理无基因注释的GEO数据集的方法。当遇到GPL平台无基因注释时,可以通过以下步骤解决:1) 查看数据集补充文件中是否已有注释矩阵;2) 使用搜索引擎或官网查找相关资源;3) 如数据集较新,尝试联系平台官方;4) 利用已有经验进行转换。文中通过多个GSE示例详细解释了如何处理不同情况,并提醒读者注意检查数据集中可能隐藏的注释信息。作者提供了转换ID的代码,并在公众号“多线程核糖体”分享了相关资源。
778 0
|
弹性计算 前端开发 容器
通俗重制系列--CSS布局
通俗重制系列--CSS布局
150 0
通俗重制系列--CSS布局
|
数据库 数据安全/隐私保护
写代码的七八九十宗罪,多图、胆小慎入!
写代码的七八九十宗罪,多图、胆小慎入!
190 0
写代码的七八九十宗罪,多图、胆小慎入!
CSS学习第五天(网页布局三大准则)(浮动(重点))(3)
CSS学习第五天(网页布局三大准则)(浮动(重点))
CSS学习第五天(网页布局三大准则)(浮动(重点))(3)
CSS学习第五天(网页布局三大准则)(浮动(重点))(2)
CSS学习第五天(网页布局三大准则)(浮动(重点))
CSS学习第五天(网页布局三大准则)(浮动(重点))(2)
CSS学习第五天(网页布局三大准则)(浮动(重点))(1)
CSS学习第五天(网页布局三大准则)(浮动(重点))
CSS学习第五天(网页布局三大准则)(浮动(重点))(1)
|
前端开发 固态存储 JavaScript
【SSD系列】雪花飘,购物抛物线,进度条等四个案列,带入走进 CSS transition
Transition事件的触发次数是非复合的过渡属性的个数, 比如width, height同时变换,那么就是两次。 还比较有趣的事, 比如hover到某元素的时候,开始变换,没变换结束,你就离开。 变换效果会倒着来。上面的demo,就会看到。
188 0
【SSD系列】雪花飘,购物抛物线,进度条等四个案列,带入走进 CSS transition
零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果
原文:零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ...
1203 0