福利来了: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

相关文章
|
编解码 C++
虚幻4 Tips分享
虚幻4 Tips分享
300 0
|
前端开发 JavaScript
用Transition组件犯迷糊?看我这篇给你安排的明明白白的
transition组件作为Vue的内置组件,可以用来实现组件的过渡效果。在Vue中,过渡效果是通过CSS来实现的,所以过渡不是如何使用组件,而是如何写CSS。
158 0
用Transition组件犯迷糊?看我这篇给你安排的明明白白的
|
弹性计算 前端开发 容器
通俗重制系列--CSS布局
通俗重制系列--CSS布局
151 0
通俗重制系列--CSS布局
|
存储 程序员
七夕快到了,用SwiftUI做一个表达爱意的心形动画
传统的七夕快到了,作为一个程序猿,最浪漫的礼物当然是自己写的啦! 思来想去也不知道写什么好,在某天在某音上学习时看到点赞的动画效果还不错,那不如就做一个表达爱意的动画吧。
376 0
七夕快到了,用SwiftUI做一个表达爱意的心形动画
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
105 0
#yyds干货盘点# 【js学习笔记四十七】实现两栏布局的第三种方式
|
JavaScript 前端开发
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
118 0
#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式
|
JavaScript Android开发
第二十二章:动画(十九)
更多你自己的等待方法之前,您已经了解了如何将TaskCompletionSource与Device.StartTimer一起使用来编写自己的异步动画方法。 您还可以将TaskCompletionSource与Animation类结合使用,编写自己的异步动画方法,类似于ViewExtensions类中的方法。
677 0
零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果
原文:零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ...
1213 0
|
内存技术
零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计
原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画。
1402 0