captain-ui

Captain UI

安装

npm i -S captain-ui

使用

使用 babel-plugin-import (推荐)

// .babelrc or babel-loader option
{
 "plugins": [
   ["import", { "libraryName": "captain-ui", "style": true }]
 ]
}

接着你可以直接引入 captain-ui 组件，等价于下方的按需引入组件

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

按需引入

js引入

每个组件都有自己对应的npm包，可以直接单独引入对应的包

import { Pay } from 'captain-pay';

css引入

css 文件引入需要 postcss-easy-import 类似插件解析引入的css文件路径

@import 'captain-pay';
// 没有插件的情况下，可以用以下方式直接引入
// @import 'captain-pay/lib/index.css';

运行示例demo

安装项目依赖

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

增加 localhost host解析

localhost 127.0.0.1

运行demo

make dev

在浏览器中打开 http://localhost:3003/ 即可

开发新组件

以创建组件 OrderPay 为例

增加文档导航配置

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

文档编写

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

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. 本地构建

npm run deploy

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

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