管理系统系列--基于 Quasar 的管理系统模板.zip

# quasar-admin-template 基于 Quasar 的管理系统模板 Quasar相比ElementUI，胜在可定制性上比较强，每个组件保留了大量的Slot和Event，可以按自己喜好自定义，同时官网文档也相当详细，看文档能解决绝大多数问题。界面也相对漂亮一些，另外还有一个很大的优势，Quasar对于移动端的适配做得非常棒。 问题是一些国内常用的功能和组件，Quasar缺失，这就需要自己二次开发或用其他js库代替。 ## 代码仓库 [Github](https://github.com/jinjingmail/quasar-admin-template) [Gitee](https://gitee.com/jinjinge/quasar-admin-template) ## 主要特点 - 给个`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 ```bash 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](http://jinjinge.gitee.io/quasar-admin-template) ## 界面截图 ### 见“UI”目录 ### PC上的效果              ### 手机上的效果          ## Install the dependencies（安装依赖） ```bash 首先，安装nodejs（注意：只能是12和14版本，更新的版本可能有问题） 然后，安装 quasar 工具： npm install -g @quasar/cli 安装依赖: npm install ``` ### Start development mode (启动app开发模式) ```bash quasar dev ``` ### Lint the files（Lint校验） ```bash npm run lint ``` ### Build the production（构建发行版本） ```bash quasar build ``` ### Customize the configuration（修改配置） See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).