Taro3 中使用 vant-weapp 的示例 React 版本
引用 vant 组件需要在页面的 config 文件中进行配置，如
export default { navigationBarTitleText: '首页', usingComponents: { 'van-button': '../../components/vant-weapp/dist/button/index' } }值得注意的是，无论是在页面还是组件中引用 vant 组件，都是在页面的 config 中进行配置引用。
vant 组件中包含一些小程序原生文件的依赖，目前 Taro 没有对这些依赖进行分析，需要配置 copy 移动到 dist 目录中，例如需要 copy wxs 和样式文件，部分配置如下
// config/index.js const config = { // ... copy: { patterns: [ { from: 'src/components/vant-weapp/dist/wxs', to: 'dist/components/vant-weapp/dist/wxs' }, { from: 'src/components/vant-weapp/dist/common/style', to: 'dist/components/vant-weapp/dist/common/style' }, { from: 'src/components/vant-weapp/dist/common/index.wxss', to: 'dist/components/vant-weapp/dist/common/index.wxss' }, { from: 'src/components/vant-weapp/dist/calendar/index.wxs', to: 'dist/components/vant-weapp/dist/calendar/index.wxs' }, { from: 'src/components/vant-weapp/dist/calendar/utils.wxs', to: 'dist/components/vant-weapp/dist/calendar/utils.wxs' }, { from: 'src/components/vant-weapp/dist/calendar/calendar.wxml', to: 'dist/components/vant-weapp/dist/calendar/calendar.wxml' }, { from: 'src/components/vant-weapp/dist/calendar/components/month/index.wxs', to: 'dist/components/vant-weapp/dist/calendar/components/month/index.wxs' }, ], options: { } }, }如果直接在 Taro 中使用 vant 组件，会发现样式偏小的情况，这是因为 Taro 默认将 vant 的样式尺寸从 px 转换为了 rpx，可以通过配置 selectorblacklist 来禁止转换。
// config/index.js const config = { mini: { postcss: { pxtransform: { enable: true, config: { selectorBlackList: [/van-/] } } } }, }