UNPKG

zr-admin-ui

Version:

基于ElementUI拓展组件

94 lines (82 loc) 3.79 kB
## 安装 ``` 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](http://caibaojian.com/nodejs/) 和 [git](http://git.p2hp.com/)。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui,提前了解和学习这些知识会对使用本项目有很大的帮助。 本项目的定位是后台集成方案,仅适合PC端管理后台开发。因为本框架包含多种基础框架,请确保使用前对如下框架有所学习与了解: - 前端框架:[Vue.js](https://cn.vuejs.org/) - UI框架:[Element](https://element.eleme.cn/#/zh-CN) - 集成方案:[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/) ## 说明文档 官方文档地址 [ZR-AdminUI](http://39.101.69.208:8007/docs/documents/guide/info.html)。 ## 框架统计 | 组件名称 | 说明 | | :----------- |:-------------| | 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