基于 Vue 2 的 UI 组件 XMUI

码农软件 · 软件分类 · UI组件库 · 2019-08-01 13:14:24

软件介绍

XMUI

基于vue 2+ ,为公司产品打(zao)造(lun)的(zi)可复用UI组件,适用于 移动 和 部分PC 端,其中包括 基础组件 和 应用组件,目前 组件 和 文档 在不断完善中。

特性

  • 基于 Vue>=v2.1.4 开发的可复用 UI 组件,并且可随产品需要扩展

  • 使用Vue官方的工作流,支持 ES6

  • 一系列线上产品都在使用中

  • 关于SEO问题推荐使用插件 prerender-spa-plugin

浏览器支持

  • 适用于 移动 和 部分PC 端(Chrome,safari,IE9+等)

开发

全局引入 -- 在 webpack 入口文件 main.js 中如下配置:

# 安装
cnpm install x-m-ui --save  

# 引入css
import 'x-m-ui/package/xmui.min.css'  

# 引入xmui.min.js
import xmui from 'x-m-ui'  

# 注入到vue
Vue.use(xmui)

按需引入 -- 在 入口文件 main.js 或 组件内 中如下配置:

# 全局组件 main.js引入
import Toast from 'x-m-ui/package/comps/components/toast'
Vue.prototype.$toast = Toast

# 一般组件
import xmButton from 'x-m-ui/package/comps/components/button'
import xmButtonGroup from 'x-m-ui/package/comps/components/buttongroup'
import xmModal from 'x-m-ui/package/comps/components/modal'
...

components: {
    xmButton,
    xmButtonGroup,
    xmModal
    ...
}

更多说明,请查看在线文档

查看示例

在线示例

组件列表

  •  按钮

  •  标签

  •  加载更多

  •  搜索框

  •  单元格

  •  表单

  •  网格和图标

  •  flexbox

  •  Modal

  •  Toast

  •  Loading

  •  工单流程

  •  skeleton骨架

  •  轮播

  •  ActionSheet

  •  Popup

  •  无缝滚动

  •  左右滑菜单

  •  时间选择器

  •  标签页

  •  导航栏(顶部)

  •  标签栏(底部)

关于如何构建 Vue 组件库的文章,有兴趣的朋友可了解一起探讨

如何基于 Vue 2 写一套 UI 库

贡献

在此不一一感谢所有付出脑力体力的同仁,如有疑问,请与我们联系
如果你在使用时遇到问题,或者有好的建议,欢迎给我们提 Issue 或 Pull Request

本文地址:https://codercto.com/soft/d/11409.html

运营攻略

运营攻略

陈辉 / 人民邮电出版社 / 2017-12 / 59

《运营攻略 移动互联网产品运营提升笔记》深入浅出地告诉大家什么是运营,梳理了移动互联网时代各类运营方向的工作重点与工作方法,结合实例指出了每类运营方向的提升要点;结合作者的亲身经历,解答了无数运营人与产品人纠结的运营与产品到底有什么异同的问题;指明了运营人的核心竞争力,并对处于不同阶段的运营人提出了相应的建议与要求;尤为难得的是,《运营攻略 移动互联网产品运营提升笔记》中还阐述了内容型产品与工具型......一起来看看 《运营攻略》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试