Taro如何引用Vant-weapp

在Taro中引用VantUI(weapp)其实并不复杂，但需要注意一些细节。首先，我们需要在项目中安装VantUI(weapp)。

npm install vant-weapp --save

安装完成后，我们就可以在代码中引用VantUI(weapp)的组件了。例如，要使用VantUI(weapp)的Button组件，我们可以这样写：

import Button from 'vant-weapp/lib/button';

export default class MyComponent extends Component {
  render() {
    return (
      <View>
        <Button type="primary">Button</Button>
      </View>
    );
  }
}

需要注意的是，在Taro中引用VantUI(weapp)的组件时，需要在组件名前面加上vant-weapp/lib/的前缀。这是因为Taro使用了webpack来打包代码，而webpack在处理第三方库时，会将第三方库的代码放在一个单独的目录中。因此，我们需要在引用第三方库的组件时，加上这个前缀，以便webpack能够找到这些组件。

除了以上方法外，我们还可以使用Taro提供的@tarojs/plugin- vant-weapp插件来引用VantUI(weapp)的组件。使用这种方法，我们只需要在项目中安装@tarojs/plugin- vant-weapp插件，然后在taro.config.js文件中添加如下配置：

module.exports = {
  plugins: [
    '@tarojs/plugin- vant-weapp',
  ],
}

添加完配置后，我们就可以在代码中直接引用VantUI(weapp)的组件了，而无需加上vant-weapp/lib/的前缀。例如，要使用VantUI(weapp)的Button组件，我们可以这样写：

import Button from 'vant/lib/button';

export default class MyComponent extends Component {
  render() {
    return (
      <View>
        <Button type="primary">Button</Button>
      </View>
    );
  }
}

需要注意的是，@tarojs/plugin- vant-weapp插件只支持VantUI(weapp)的最新版本。如果你的项目中使用的是VantUI(weapp)的旧版本，则需要使用第一种方法来引用VantUI(weapp)的组件。