斗拱开发者论坛

线下账单支付 vue 组件库Repository：https://github.com/huifurepo/dg-bill-plugin简介解决重复造轮子的问题：提供一套专为手机端账单支付场景打造的UI 组件库，帮助开发者快速搭建账单页面，提升用户体验，无需担心适配，简化逻辑管理组件列表账单金额组件账单支付按钮组件账单 Banner 组件账单公告组件账单详情文本组件账单明细选择组件账单分割占位组件组件模拟器查看演示接入说明安装npm i @chinapnr/dg-bill-plugin 配置 easycom打开 /src/pages.json 进行配置 "easycom": { "autoscan": false, "custom": { "mx-(.*)": "@chinapnr/dg-bill-plugin/lib/$1/index.vue" } } 在 /src/App.vue 中添加组件样式@import '@chinapnr/dg-bill-plugin/lib/styles/matrix.scss'; 在 /src/pages 文件夹内的任意 vue 文件中，直接使用组件库标签<template> <mx-bill-notice>缴费公告</mx-bill-notice> </template>

汇付支付斗拱商户 Vue 组件库Repository：https://github.com/huifurepo/dg-dashboard-sdk本地开发指南tips:本项目仅适用于使用Vue2版本和element-ui2.15.71.1安装npm i 1.2将当前项目生成软链npm link 1.3.在使用当前项目的demo中，执行如下命令，指向当前项目// 名称参考rollup.config.js中的output导出的name npm link dg-element 2.额外配置(保证demo与本项目用一套elementUI和vue，防止样式污染)当前项目中执行如下命令: rm -rf node_modules/vue rm -rf node_modules/element-ui // 若使用组件库的项目与组件库项目为同一层级目录 ln -s node_modules/vue ../demo/node_modules/vue ln -s node_modules/element-ui ../demo/node_modules/element-ui 4.重启demo和组件库5.发布流程nrm use npm //需要修改npmBuild中config.json文件 npm run release 使用已经发布的仓库假设发布的仓库名称为dg-element安装npm 安装npm i dg-element -S 引入完整引入在 main.js 中写入以下内容：import Vue from 'vue'; import DGElement from 'dg-element'; // 引入style样式 import 'dg-element/dist/dg-element.css'; import App from './App.vue'; import store from './store'; // 全局注册SDK Vue.use(DGElement); new Vue({ el: '#app', render: h => h(App) }); 在页面中写入可引入相关组件：<template> <div> {/* 商户列表组件 */} <HMerchantList></HMerchantList> </div> </template> <script> export default { name: 'MerchantList', };