刘大钰

package.json的dependencies需要增加依赖包

// 引入vant，同时引入plugin-html
  "dependencies": {
    "@tarojs/plugin-html": "3.3.3",
    "vant": "^2.12.13",
  },

config/index.js用plugin-html注册pxtransformBlackList黑名单 (vant组件和自己封装的组件不走pxtransform)

  plugins: [
    ['@tarojs/plugin-html', {
      pxtransformBlackList: [/my-/, /van-/]
    }]
  ],

package.json的devDependencies增加babel preset和plugin import

"devDependencies": {
    "babel-plugin-import": "^1.13.3",
    "babel-preset-taro": "3.3.0-alpha.8",
  },

babel.config.js 编译时声明框架taro和引用组件库vant

module.exports = {
  presets: [
    ['taro', {
      framework: 'vue',
      ts: false
    }]
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

自己遇到的一个坑，vue-loader依赖任意版本css-loader，不指定则css-loader用最新，最新的css-loader依赖webpack 5。
webpack 5打包会报错Error: Rule can only have one resource source。
项目里其他node modules依赖webpack 4.46即可，所以指定webpack和css-loader版本如下：
···
"devDependencies": {
"vue-loader": "^15.9.2",
"webpack": "^4.46.0"
},
"peerDependencies": {
"css-loader": "3.6.0"
}
···

自定义浏览器默认样式
可以直接全局引用taro提供的内置样式或者overwrite部分样式使VantUI正常
在app.less中加入

.h5-span {
  display: inline;
}

.h5-button,
.h5-input {
  display: inline-block;
}

.h5-button::after {
  border: none;
}

.van-button--hairline::after {
  transform-origin: unset;
  width: unset;
  height: unset;
}

app.js 引入自定义浏览器默认样式，引入并注册自封装组件

import './app.less'
/** import customized components */
import ActionSheet from './components/action-sheet'
import Button from './components/button'
import Image from './components/image'

// Register customized components
Vue.component(ActionSheet.name, ActionSheet)
Vue.component(Button.name, Button)
Vue.component(Image.name, Image)

通用样式和组件里使用，demo里样式搬的官方的，可以拿来参考。
src/style/var.less里定义通用样式变量
components/组件里引用

自封装组件格式：

<template>
  <div class="demo-component">
    <van-component v-model="show" :attr="attr" @select="onSelect" />
  </div>
</template>

<script>
import Taro from '@tarojs/taro'
import { Component } from 'vant'

export default {
  name: 'my-component',
  components: {
    'van-component': Component
  },
  props: { 
    show: {
      type: Boolean,
      default: false
    },
    atrr: {
        type: Array,
        default: [
        { name: 'option1' },
        { name: 'option2' },
        { name: 'option3' },
      ]
    }   
  },
  methods: {
    onSelect(item) {
      this.show = false;
      Taro.showToast({
        title: item.name,
        icon: 'none'
      })
    },
  },
};
</script>

<style lang="less">
@import '../../style/var';
.demo-component {
  &-content {
    padding: @padding-md @padding-md @padding-md * 10;
  }
}
</style>

页面中(pages/index/index)使用

<template>
  <view>
    <my-component :show="show" />
  </view>
</template>

其他一些和适配无关但是和项目有关的配置
app.config.js pages指定项目中用到那些页面

demo效果