汇付支付斗拱商户 Vue 组件库（dg-dashboard-sdk）

[其宝]

汇付支付斗拱商户 Vue 组件库

Repository：https://github.com/huifurepo/dg-dashboard-sdk

本地开发指南

tips:本项目仅适用于使用Vue2版本和element-ui2.15.7

1.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',
};