XMUI基于 Vue 2 的 UI 组件

联合创作 · 2023-09-28 01:23

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

浏览 27
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报