Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

captain-ui

Package Overview
Dependencies
Maintainers
5
Versions
423
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

captain-ui

有赞vue wap业务组件库

  • 0.7.22
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

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

增加 localhost host解析

localhost 127.0.0.1

运行demo

make dev

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

开发新组件

以创建组件 OrderPay 为例

创建组件

使用make init 创建组件

make init order-pay

增加文档导航配置

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'
   }
  }
}];

Keywords

FAQs

Package last updated on 02 Nov 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc