Captain UI

版本区分

- master 分支基于 Vant 2 开发，版本号为 2.x
- 1.x 分支基于 Vant 1 开发，版本号为 1.x

安装

``shell
npm i -S captain-ui
`

使用

$3


`js
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "captain-ui", "style": true }]
]
}
`
接着你可以直接引入 captain-ui 组件，等价于下方的按需引入组件

`js
// 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
import { Pay } from 'captain-ui';
`

$3

#### js引入

每个组件都有自己对应的npm包，可以直接单独引入对应的包
`js
import { Pay } from 'captain-pay';
`
#### css引入
css 文件引入需要 postcss-easy-import 类似插件解析引入的css文件路径
`css
@import 'captain-pay';
// 没有插件的情况下，可以用以下方式直接引入
// @import 'captain-pay/lib/index.css';
`

运行示例demo

$3

`shell
yarn install
ynpm install -g felint #代码校验
felint hooks #添加校验钩子
`

$3


`
localhost 127.0.0.1
`

$3

`sehll
make dev
`
在浏览器中打开 http://localhost:3003/ 即可

开发新组件

以创建组件 OrderPay 为例

$3

在 docs/doc.config.js 中增加对应的文档配置

$3

在 docs/examples-docs 目录下增加对应组件的文档，默认会直接引入 index.md 文档进行编译
与index.md同级目录下的 config.js 定义mock的请求数据，格式如下：

`javascript
module.exports = [{
// 发起请求的链接
url: '/v2/pay/UnifiedCashier/getQrcode.json',
// 发起请求的请求方式
method: 'POST',
// 请求的返回数据内容
response: {
code: 0,
msg: '处理成功',
data: {
content: 'aHR0cHM6Ly93d3cuaGFvMTIzLmNvbS8=',
imageFormat: 'png',
codeFormat: 'QR_CODE',
encoding: 'BASE64',
width: 300,
height: 300
}
}
}, {
url: '/v2/pay/UnifiedCashier/payStatus.json',
method: 'POST',
response: {
code: 0,
msg: '处理成功',
data: {
status: 'success'
}
}
}];
`

如何更新文档网站

1. 本地构建

`bash
npm run deploy
`

2. 登录 qa 机器更新代码
没有 qa 机器权限的话，可以在 ops 上申请，应用名为 fe-lab

`bash
i qabb-fe-doc0
cd /data/project/captain-ui/
sudo git pull
``