quasar-admin-template

基于 Quasar 的管理系统模板

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

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

代码仓库

Github Gitee

主要特点

• 给个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-mobile

CoInput 在popup-proxy 里面时，有时候prepend、append、before、after 的slot会失效
对话框最大化后，取消拖动
TODO BUG 图表dark模式文字颜色

Demo

Demo

界面截图

见“UI”目录

PC上的效果

手机上的效果

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.