如何在小程序开发工具中导入vant-weapp组件库？

我想导入vant-weapp的Tabber标签栏，官方文档的方法是在app.json中写入以下代码：

"usingComponents": {
  "van-tabbar": "path/to/vant-weapp/dist/tabbar/index",
  "van-tabbar-item": "path/to/vant-weapp/dist/tabbar-item/index"
}

但是我复制进去之后发现报错了：

于是我自己尝试更改成以下代码：

"van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index",
       "van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index"

结果虽然能够显示出Tabber标签栏，但是并不完整。如下图：

原本应该是这样的才对：

请问是哪里出错了？我该如何修改？

你这都报错了，所以下面的导航栏就这样了，这是报错才会变成这样的，亲测

• 这篇博客: 微信小程序uniapp，vant-weapp中Tab 标签页简单使用和修改title文字大小中的 第二步：在页面使用 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 代码如下（示例）：

  <template>
  	<view class="lx_tab">
  		<view class="nav">
  			<van-tabs :active="active" @change="onChange">
  				<van-tab title="关注">关注</van-tab>
  				<van-tab title="推荐">推荐</van-tab>
  			</van-tabs>
  		</view>
  	</view>
  </template>
  

  <script>
  	export default {
  		data() {
  			return {
  				active: 1,//默认选中标签的标识符
  			}
  		},
  		onLoad() {
  
  		},
  		methods: {
  			//点击事件
  			onChange(event) {
  				console.log("event", event)
  			},
  		},
  	}
  </script>
  

  提示：可以在console中查看打印的event中的内容

  <style lang="scss" scoped>
  	//修改tab标签页中title文字的样式
  	/deep/.van-ellipsis {
  		font-size: 30rpx;//字体大小
  		font-weight: bold;//字体加粗
  	}
  </style>
  

  ---

  学疏才浅，如有错误，敬请各位大佬斧正