Captain UI
版本区分
- master 分支基于 Vant 2 开发,版本号为 2.x
- 1.x 分支基于 Vant 1 开发,版本号为 1.x
安装
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 插件解析;
按需引入
js引入
每个组件都有自己对应的npm包,可以直接单独引入对应的包
;
css引入
css 文件引入需要 postcss-easy-import 类似插件解析引入的css文件路径
;// 没有插件的情况下,可以用以下方式直接引入//;
运行示例demo
安装项目依赖
yarn installynpm 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的请求数据,格式如下:
moduleexports = // 发起请求的链接 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' ;
如何更新文档网站
- 本地构建
npm run deploy
- 登录 qa 机器更新代码 没有 qa 机器权限的话,可以在 ops 上申请,应用名为 fe-lab
i qabb-fe-doc0cd /data/project/captain-ui/sudo git pull