sa-admin (vue单页版)
一个多窗口后台模板，流畅、易上手、提高生产力，演示地址：http://sa-vue-admin.dev33.cn
如果你不太熟悉vue单页应用，点我访问iframe版
优点
- 上手简单：提供完整彻底的封装，不用修改一行源代码即可轻松集成
- 示例全面：提供大量常见增删改查示例，提高你的生产力
需求提交
- 我们深知一个优秀的项目需要海纳百川，点我在线提交需求
框架选型
- JS引擎：Vue @2.6.11
- 脚手架：@vue/cli @4.0.5
- UI框架：Element-UI @2.13.0
- web弹层：layer @3.1.1
- 切页动画：Swiper @4.5.0
功能
- 菜单：支持一、二、三级菜单，并开放一系列接口方便的使用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
- 根据控制台输出的路径，访问浏览器，一般为：http://localhost:8080/
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群询问
贡献代码
- 在github上fork一份到自己的仓库
- clone自己的仓库到本地电脑
- 在本地电脑修改、commit、push
- 提交pr（点击：New Pull Request）（提交pr前请保证自己fork的仓库是最新版本，如若不是先强制更新一下）
- 等待合并
建议贡献的地方
- 更多登录模板
- 修复源码现有bug，或增加新的实用功能（比如：流畅的tab左右拖拽排序）
- 更多demo示例：比如针对element-ui一些复杂组件的示例，或者其它一些常见js库的集成使用
- 如果更新实用功能，可在文档友情链接处留下自己的推广链接
QQ群
QQ交流群：782974737 点击加入
截图
见演示说明地址