例：vtabs

进入项目目录

npm init -y

npm install @miniprogram-component-plus/vtabs
npm install @miniprogram-component-plus/vtabs-content

vtabs.wxml

<mp-vtabs 
  vtabs="{{vtabs}}" 
  activeTab="{{activeTab}}" 
  bindtabclick="onTabCLick"
  bindchange="onChange"
  class="test"
>
  <block wx:for="{{vtabs}}" wx:key="title" >
    <mp-vtabs-content tabIndex="{{index}}">
      <view class="vtabs-content-item">我是第{{index + 1}}项： {{item.title}}</view>
    </mp-vtabs-content>
  </block>
</mp-vtabs>

vtabs.json

{
    "usingComponents": {
        "mp-vtabs": "@miniprogram-component-plus/vtabs",
        "mp-vtabs-content": "@miniprogram-component-plus/vtabs-content"
    }
}

此时报错找不到@miniprogram-component-plus/vtabs 点击选项“工具”，点击“构建npm”，保存无报错

vtabs.js

需要有vtabs数组

Page({
  data: {
    vtabs: [],
    activeTab: 0,
  },

  onLoad() {
    const titles = ['热搜推荐', '手机数码', '家用电器',
      '生鲜果蔬', '酒水饮料', '生活美食', 
      '美妆护肤', '个护清洁', '女装内衣', 
      '男装内衣', '鞋靴箱包', '运动户外', 
      '生活充值', '母婴童装', '玩具乐器', 
      '家居建材', '计生情趣', '医药保健', 
      '时尚钟表', '珠宝饰品', '礼品鲜花', 
      '图书音像', '房产', '电脑办公']
    const vtabs = titles.map(item => ({title: item}))
    this.setData({vtabs})
  },

  onTabCLick(e) {
    const index = e.detail.index
    console.log('tabClick', index)
  },

  onChange(e) {
    const index = e.detail.index
    console.log('change', index)
  }

})

vtabs.wxss

page{
  background-color: #FFFFFF;
  height: 100%;
}