• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

quasar-admin-template: 基于 Quasar 的后台管理系统模板

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

quasar-admin-template

开源软件地址:

https://gitee.com/jinjinge/quasar-admin-template

开源软件介绍:

quasar-admin-template

基于 Quasar 的管理系统模板

Quasar相比ElementUI,胜在可定制性上比较强,每个组件保留了大量的Slot和Event,可以按自己喜好自定义,同时官网文档也相当详细,看文档能解决绝大多数问题。界面也相对漂亮一些,另外还有一个很大的优势,Quasar对于移动端的适配做得非常棒。

问题是一些国内常用的功能和组件,Quasar缺失,这就需要自己二次开发或用其他js库代替。

代码仓库

GithubGitee

主要特点

  • 给个star
  • 良好的适配移动端小屏幕
  • Dark 和 Light模式自由切换
  • 可以分别自定义Dark 和 Light模式下的颜色样式,并保存到LocalStorage里面,关闭浏览器不丢失
  • 可自定义左侧菜单栏宽度、背景色、字体色,顶部标题栏颜色、Tab标签栏位置和是否显示 等
  • 左侧菜单栏基于路由配置自动生成,可以实现noCache、icon等自定义配置
  • 页面路由Tab标签栏
  • 演示了几种在页面实现搜索栏的样式(费了我不少时间)
  • 增强开发了CoDialog,可以实现拖拽和最大化等
  • 增强开发了CoTree,增加了很多功能
    • tick-strategy 在原有none strict leaf leaf-filtered的基础上,增加leaf-any-with-parent(子节点大于0个ticked,则增加父节点)、leaf-all-with-parent(子节点全部ticked,则增加父节点)、leaf-all-only-parent(子节点全部ticked,则只取父节点,去掉子节点)
    • 增加事件 ticked-label和selected-label,返回选择的节点的label
    • 增加一个过滤输入栏
  • 增强开发了CoTable,新增了新的loading样式,还有sticky-header、sticky-first-column、sticky-last-column
  • 增强开发了CoForm,CoDate、CoInput、CoOptionGroup、CoFormItem,增加一些实用功能
  • 新增CoDateSelect
  • 新增CoTreeSelect
  • 新增CoTreeTable
  • 感谢:eladmin-web、vue-element-admin、quasar-admin-crm、quasar-element-pro
TODO co-dialog  - TODO 可移动的dialog的标题栏图标显示移动鼠标光标  - TODO dialog里面内容滚动时,可以不滚动标题栏、底部工具栏TODO 页面增加字段选择的存储TODO 页面增加表格大小选择(存储)TODO 页面总的增删改查工具栏,可以配置为变灰还是消失TODO 如果不显示 Tab 栏,则所有页面都不 keep-alive(不缓存)TODO 加快图标页加载速度TODO 菜单caption 附加文字颜色,改为灰色TODO 在右侧打开外部url(iframe或其他方案)TODO 增加“个人设置”页面TODO 菜单增加“new”标签支持TODO CoOptionGroup 自定义form项的错误提示TODO CoDateSelect 可以手工输入日期、可以选择“最近7天、最近30天、本月、。。。”TODO co-tree selected和ticked,可以设置“只选parent,只选leaf”为 co-tree 添加 tree-class / tree-style tree-class-mobile tree-style-mobileCoInput 在popup-proxy 里面时,有时候prepend、append、before、after 的slot会失效对话框最大化后,取消拖动TODO BUG 图表dark模式文字颜色

Demo

Demo

界面截图

见“UI”目录

PC上的效果

indexindex_darkiconsloginpage_search_dialogpage_search_popuppage_search_popup_darkpage_tablepage_table_darkpage_table_with_dialogpage_tree_selectpage_tree_table2right_bar_setting

手机上的效果

indexindex_darkleft_sidebarpage_search_popuppage_tablepage_table_darkpage_table_with_dialogpage_tree_tableright_setting_bar

Install the dependencies(安装依赖)

首先,安装nodejs(注意:只能是12和14版本,更新的版本可能有问题)然后,安装 quasar 工具:npm install -g @quasar/cli安装依赖:npm install

Start development mode (启动app开发模式)

quasar dev

Lint the files(Lint校验)

npm run lint

Build the production(构建发行版本)

quasar build

Customize the configuration(修改配置)

See Configuring quasar.conf.js.


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap