xm-ui v2.0.0

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