---
name: ReadMe
title: 开始
group: GettingStarted
---

![](http://ued.xiongmaojinku.com/img/site-logo.png)

## 首次安装

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

## 更新

xmui源码项目下

```bash

# - src目录修改你的源码

# - 使用babel编译，并输出es5的生产代码到/models/lib目录
$ yarn build

# - push所有源码和生产代码到master
$ yarn push

# - 提交新版本tag： 新版本号 >= 旧版本号
$ yarn tags [新版本号]

# - push package.json的更改到master
$ yarn push

```

应用项目下

```bash
# 例如，需要升级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
```

## 启动

启动文档示例

```bash
# 先安装所有依赖包
$ yarn

# 启服务
$ yarn start
```

## 编写文档

### 开始

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

### 目录结构

```xml
- 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 文档示例

```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`上:

```bash
$ yarn build-doc
```

# TODO

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