安装

npm install zr-admin-ui

导入

// main.js 中引入 
import zrAdminUI from 'zr-admin-ui'
Vue.use(zrAdminUI)

简介

ZR-AdminUI 是什么？

ZR-AdminUI是基于VUE+ElmentUI框架，为了便于项目高效开发，并保持一致性与标准化进行二次封装形成的前端技术框架；将ZR产品开发资源进行优化与汇总，目的是为了提升代码复用率与稳定性形成ZR自有的前端框架。 特点：

• 代码统一维护与更新，无论是有经验的开发人员或初级前端开发人员，能够快速构建项目
• 代码高度组件化，复用率高，避免重复造轮子，减少冗余及低效代码
• 参考文档及时更新，让开发人员能快速查找与参阅
• 主流前端框架VUE+ElementUI封装，学习成本低、稳定高效
• 多套UI风格可选，满足不同类型项目开发所需
• 组件不断迭代更新，根据项目需求及时迭代优化

前序准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，提前了解和学习这些知识会对使用本项目有很大的帮助。

本项目的定位是后台集成方案，仅适合PC端管理后台开发。因为本框架包含多种基础框架，请确保使用前对如下框架有所学习与了解:

• 前端框架：Vue.js
• UI框架：Element
• 集成方案：vue-element-admin

说明文档

官方文档地址 ZR-AdminUI。

框架统计

| 组件名称 | 说明 | | :----------- |:-------------| | ZrButton | 按钮组 | | ZrFormGroup | 分组表单 | | ZrForm | Form表单 | | ZrFormLine | 表单分割线 | | ZrFormItemGroup | 表单分组Group | | ZrTips | 提示文本 | | ZrTable | Table表格 | | ZrSearchBox | 综合搜索 | | ZrButtonBox | 操作按钮 | | ZrInfo | 信息展示区 | | ZrInfoBox | 综合信息展示 | | ZrDrawer | 抽屉 | string | | ZrTransition | 动画 | | ZrRadio | 单选按钮组 | | ZrCheckbox | 多选按钮 | | ZrCheckboxGroup | 多选按钮组 | | ZrCitySelect | 城市选择 | | ZrMap | 地图选择 | | ZrNearRadio | 近期选择器（单选） | | ZrNearInput | 近期选择器（自定义） | | ZrNearSelect | 近期选择器（多选） | | ZrErrorPages | 错误页面 | | ZrBrowserPages | 浏览器版本提示 | | ZrElInputNumber | 数字输入框 | | ZrCard | 卡片 | | ZrDialog | Dialog对话框 | | ZrTree | Tree树组件 | | ZrTabs | Tabs菜单 | | ZrSelectIcon | 字体图标选择组件 | | ZrLineChart | 折线图 | | ZrBarChart | 柱状图 | | ZrPieChart | 饼状图 | | ZrFunnelChart | 数据漏斗 | | ZrSwiperGroup | 商品详情轮播图 |

过滤器filters

| 过滤器名称 | 说明 | | :----------- |:-------------| | trim | 去除字符串空格 | | upDigit | 数字转换为大写金额 | | filterDateTime | 转化时间格式 年月日 时分秒 | | filterDate | 转化时间格式 年月日 | | numberToCurrencyNo | 数字千分位格式化 | | Tofixed | 数字转化为两位小数 |

自定义指令directives

| 指令名称 | 说明 | | :----------- |:-------------| | copy | 一键复制 | | longpress | 长按指令 | | waterMarker | 自定义水印 |

开源协议

ISC