xm-ui

---

name: ReadMe title: 开始 group: GettingStarted

首次安装

# 应用项目下执行 
$ yarn add xmui@https://git.coding.net/xmjk-fe/xmui.git#1.4.8

更新

xmui源码项目下

 
# - src目录修改你的源码 
 
# - 使用babel编译，并输出es5的生产代码到/models/lib目录 
$ yarn build
 
# - push所有源码和生产代码到master 
$ yarn push
 
# - 提交新版本tag： 新版本号 >= 旧版本号 
$ yarn tags [新版本号]
 
# - push package.json的更改到master 
$ yarn push
 

应用项目下

# 例如，需要升级xmui到`1.5.4`版本 (请先保证xmui源码项目已经提交了1.5.4的tag版本) 
# 修改应用项目下的`package.json` 
# {  
#   "xmui": "https://git.coding.net/xmjk-fe/xmui.git#1.5.4"  
# } 
 
# 执行yarn更新 
$ yarn

启动

启动文档示例

# 先安装所有依赖包 
$ yarn
 
# 启服务 
$ yarn start

编写文档

开始

$ yarn cli-add 分类/组件名称
# EX: yarn cli-add layout/input-number 
# 格式化为 => 组件名: XInputNumber 分类: Layout 

目录结构

- data                        # [编译] XMUED读取文档处
- src
    - components              # xmui组件库
        - Layout              # group
            - XWingBlank
                - index.js
                - index.css
                
    - routes               # example页面
        - Layout              # group文档大类
            - XWingBlank
                - index.js
                - index.css
                - index.md    # 组件API文档
                
    - style                  
        - _utils              # 通用sass部分 var/mixin
    ...
- tools/_lib/nunjucks              # 编译器/文档自定义tags
...	

index.md 文档示例

 
---
name: WingBlank
title: 两翼留白
group: Layout
---
 
WingBlank 是 Flex 布局的控件之一。
 
{% exCode "Layout/XWingBlank/index.js" %} # 展示的example页面js路径,展示代码用
{% exView "layout/wing-blank" %}                 # 展示的example在router中的地址
 
## API
 
| 成员	| 说明	| 类型 |	默认值 |
| --- | --- | --- | --- |
| size | 两翼留白的间距，可选`xs`,`sm`,`md`,`lg` | string | `md` |
 

部署代码

xmued和xmui是隔离的,xmui中做完example只要一行命令就能部署到xmued上:

$ yarn build-doc

TODO

• 将getScrollDom从xmui中解耦，需要外部传入 ULazyLoadImage(lazyImagesDomList, scrollDom|| getScrollDom())
• xmDependContainer;
• XNavbar的耦合
• 将xmui编译成dist （ES5），防止外部react-hot-reloader报错
• 将应用层的xm-function都调用xmui的helpers