安装

``
npm install zr-admin-ui
`

导入

`js

// 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