h5 前端扩展点自定义组件发布步骤

一、在 h5-extension 目录里进行开发
目录结构如下:

目录含义如下:

├── dist    构建结果  

├── src    源码目录  

│   └── _global    全局组件目录(目录名固定)  
│   └── node_buy    下单页节点(和有赞提供节点标识一致,更多节点表标识可在下方表格中查看)  
│           ├── _common    节点级组件目录(目录名固定)  
│           └── buy    下单页模版(和有赞提供模版标识一致,更多模板标识可在下方表格中查看)  
│                 ├── components    自定义组件目录  
│                       └── Xxx     自定义组件  
│                             └── App.vue      自定义组件指定入口文件  
└── package.json

注:以上目录名有具体要求,请开发时确认正确。

二、创建的目录名称必须按照上面的结构和下面的节点标识、模板标识匹配,否则在对应的前端路由配置中看不到。

节点 节点标识 模版 模版标识
订单列表 node_order-list 订单列表页 order-list
会员中心 node_member-center 会员中心页 member-center
购物车 node_cart 购物车 cart
订单详情 node_order-detail 订单详情页 order-detail
支付完成 node_order-pay-result 支付结果页 order-pay-result
下单页 node_buy 下单页 buy
商品详情 node_goods-detail 限时折扣商品详情 goods-detail__timelimitedDiscount
抽奖拼团商品详情 goods-detail__luckyDrawGroup
团购返现商品详情 goods-detail__tuan
F 码商品详情 goods-detail__fcode
积分商品详情 goods-detail__points
拼团商品详情 goods-detail__groupon
降价拍商品详情 goods-detail__auction
普通商品详情页 goods-detail__goods

三、进入到 package.json 所在目录下,执行 npm run release 进行发布

如果上面的操作部分无误,且发布是成功的,请确认一下 Git 仓库的 URL 地址是否正确,是否是所在项目的地址,且以.git 结尾的。

image.png

如果配置的不正确,会因为找不到项目名称而识别不到发布成功的自定义组件。