XMUI基于 Vue 2 的 UI 組件

XMUI

基于vue 2+ ，為公司產(chǎn)品打(zao)造(lun)的(zi)可復(fù)用UI組件，適用于 移動(dòng) 和 部分PC 端，其中包括 基礎(chǔ)組件 和 應(yīng)用組件，目前 組件 和 文檔 在不斷完善中。

特性

• 基于 Vue>=v2.1.4 開(kāi)發(fā)的可復(fù)用 UI 組件，并且可隨產(chǎn)品需要擴(kuò)展

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

• 一系列線上產(chǎn)品都在使用中

• 關(guān)于SEO問(wèn)題推薦使用插件 prerender-spa-plugin

瀏覽器支持

• 適用于 移動(dòng) 和 部分PC 端(Chrome,safari,IE9+等)

開(kāi)發(fā)

全局引入 -- 在 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 或 組件內(nèi) 中如下配置：

# 全局組件 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
    ...
}

更多說(shuō)明，請(qǐng)查看在線文檔

查看示例

在線示例

組件列表

•  按鈕

•  標(biāo)簽

•  加載更多

•  搜索框

•  單元格

•  表單

•  網(wǎng)格和圖標(biāo)

•  flexbox

•  Modal

•  Toast

•  Loading

•  工單流程

•  skeleton骨架

•  輪播

•  ActionSheet

•  Popup

•  無(wú)縫滾動(dòng)

•  左右滑菜單

•  時(shí)間選擇器

•  標(biāo)簽頁(yè)

•  導(dǎo)航欄(頂部)

•  標(biāo)簽欄(底部)

關(guān)于如何構(gòu)建 Vue 組件庫(kù)的文章，有興趣的朋友可了解一起探討

如何基于 Vue 2 寫(xiě)一套 UI 庫(kù)

貢獻(xiàn)

在此不一一感謝所有付出腦力體力的同仁，如有疑問(wèn)，請(qǐng)與我們聯(lián)系
如果你在使用時(shí)遇到問(wèn)題，或者有好的建議，歡迎給我們提 Issue 或 Pull Request