Skip to content

一个多窗口后台模板,流畅、易上手、提高生产力,演示地址:

License

Notifications You must be signed in to change notification settings

click33/sa-vue-admin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

sa-admin (vue单页版)

一个多窗口后台模板,流畅、易上手、提高生产力,演示地址:https://sa-vue-admin.dev33.cn

如果你不太熟悉vue单页应用,点我访问iframe版

😚 😚 😚 😚 😚 😚 😚 😚 😚 😚 😚 😚 😊 😊 😊 ❤️ ❤️ ❤️

优点

  • 上手简单:提供完整彻底的封装,不用修改一行源代码即可轻松集成
  • 示例全面:提供大量常见增删改查示例,提高你的生产力

需求提交

框架选型

功能

  • 菜单:支持一、二、三级菜单,并开放一系列接口方便的使用js操作菜单
  • 主题:目前保留八种主题:蓝色、绿色、白色、灰色、灰色-展开、pro钛合金、沉淀式黑蓝、简约式灰蓝(切换主题时,可自动保存你的喜好,下次打开时仍然有效)
  • 折叠:折叠或收缩菜单,并且监听窗口大小变化,在拉伸窗口时自动折叠或收缩菜单,自动响应式
  • tabbar栏:
    • 卡片堆积:多卡片自动堆积,与菜单双向关联,切换tab卡时自动显示左侧菜单
    • 拖动手势:tab卡支持拖拽手势,上拖全屏打开、下拽悬浮打开、左拽快速关闭
    • 右键菜单:在tab上右击,可以:刷新、复制、关闭、关闭其它、关闭所有、悬浮打开、全屏打开、取消
    • 双击菜单:双击tabbar空白处,可以显示添加新tab窗口
    • 切换动画:集成swiper,滑动、淡入、方块、3D流、3D翻转,五种高大上切换动画,任你选择!
    • 开放接口:开放一系列api,助你方便的使用js操作tabbar栏,具体请查看集成文档
  • 锚链:tab切换自动更改hash锚链,同时监听锚链改变tab,可灵活的用鼠标前后键切换tab窗口 (如不需要此功能可在初始化时关闭)
  • 窗口:可在初始化时,设置是否显示tabbar栏,来控制它是多窗口还是单窗口,具体见使用文档
  • 更新:功能不断更新中... 你有好的想法也可以告诉我,加群一起交流吧
  • 文档:使用说明,见文档

开始使用

1、获取源码

  • 方式1:通过gitee或者github下载
  • 方式2:通过Git Bash:
	git clone https://github.com/click33/sa-vue-admin.git

2、运行

  • 获取源码后,在项目根目录执行cmd命令:
	安装依赖:npm i
	运行项目:npm run serve

3、使用注意

  • 在开发时,如无必要,请不要直接魔改模板的代码,以免在运行时出现意外bug
  • 在 sa-resourecs 文件下,有个 sa-admin-init.js, 这是模板为你预留一个文件,用来对接你的业务逻辑
  • 在这个文件里,你可以:
	sa_admin.title = 'SA-后台模板';		// 设置模板标题
	sa_admin.logo_url = '图片地址';    	// 设置logo图标地址   默认值空, 代表使用:./admin-logo.png
	sa_admin.icon_url = '图片地址';   	 // 设置icon图标地址   默认值空, 代表使用:./favicon.ico
	sa_admin.initMenu(); // 初始化菜单, 不传参代表默认显示所有菜单 菜单在 ./sa-menu-list.js 里定义,
	// sa_admin.initMenu(['1', '1-1', '1-2', '4']); 	// 传入一个id数组, 显示指定菜单  
	// sa.checkAuth('a');		// 鉴权认证 (sa_admin内部封装了鉴权功能)
	sa_admin.init();	// 初始化模板, 必须调用
  • 以上示例在 sa-admin-init.js 文件里均有详细的注释说明,如果还要明白的地方,可以加入qq群询问

贡献代码

  1. 在github上fork一份到自己的仓库
  2. clone自己的仓库到本地电脑
  3. 在本地电脑修改、commit、push
  4. 提交pr(点击:New Pull Request)(提交pr前请保证自己fork的仓库是最新版本,如若不是先强制更新一下)
  5. 等待合并

建议贡献的地方

  • 更多登录模板
  • 修复源码现有bug,或增加新的实用功能(比如:流畅的tab左右拖拽排序)
  • 更多demo示例:比如针对element-ui一些复杂组件的示例,或者其它一些常见js库的集成使用
  • 如果更新实用功能,可在文档友情链接处留下自己的推广链接

QQ群

QQ交流群:782974737 点击加入

截图

截图 截图 截图

见演示说明地址

About

一个多窗口后台模板,流畅、易上手、提高生产力,演示地址:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published