Taro中引入vant-weapp

Taro中引入Vant Weapp，不能直接通过第三方NPM包的形式直接调用。需下载资源到本地

需如下几步：

下载vant-weapp文件

1.在/src/components下新建文件夹vant-weapp

2.在github上找到vant-weapp下载文件包，将对应的dist文件夹下内容复制到新建的vant-weapp文件夹下。

配置 copy 小程序原生文件

vant 组件中包含一些小程序原生文件的依赖，目前 Taro 没有对这些依赖进行分析。因此需要配置 copy 把这些依赖移动到 dist 目录中，例如需要 copy wxs 和样式文件，这里简单粗暴的copy整个目录，配置如下

// config/index.js
export default {
  ...
  copy:{
    patterns:[
      {from:'src/components/vant-weapp', to:'dist/components/vant-weapp'}
    ],
  },

}

配置忽略 vant 的样式尺寸转换

如果直接使用 vant 组件，会发现样式偏小的情况，这是因为 Taro 默认将 vant 的样式尺寸从 px 转换为了 rpx，可以通过配置 selectorblacklist 来禁止转换。

// config/index.js
const config = {
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          selectorBlackList: [/van-/]
        }
      },
    }
  },
}

引用组件

全局

vi src/app.config.js

  usingComponents: {
    "van-button": "@vant/button/index",
  }
//上面的@vant是定义的别名，如下
// config/index.js
const path = require('path')
export default {
  alias: {
    '@vant': path.resolve(__dirname, '../src/components/vant-weapp')
  },

}

局部

vi src/pages/index.config.js

export default {
  navigationBarTitleText: '首页',
  usingComponents: {
    'van-button': '@vant/button/index'
  }
}

使用

<template>
  <view>
    <van-button type='primary' :loading='true' loading-text='ing'>Button</van-button>
  </view>
</template>

<script>
export default {
  name: 'index'
}
</script>