uniapp 引入weapp不生效

解决 UniApp 中引入 Weapp 组件或功能时不起作用的问题
1. 安装依赖包
为了确保 Vant Weapp 的正常工作，在项目根目录下执行命令安装必要的依赖项。对于 H5 版本可以直接通过 NPM 来安装 vant 库并将其注册到 Vue 实例中，但对于小程序端则需特别处理[^3]。
npm install vant --save
登录后复制
2. 创建 wxcomponents 文件夹
在项目的根目录创建名为 wxcomponents 的文件夹，并将 Vant Weapp 下载下来放置于此处。此操作是为了遵循微信官方推荐的小程序组件化开发模式[^1]。
3. 配置样式表导入路径
编辑 app.vue 或者页面级别的 .vue 文件中的 <style> 标签部分，添加如下 CSS 导入语句来加载公共样式：
@import "/wxcomponents/vant-weapp/dist/common/index.wxss";
登录后复制
注意这里的路径应指向实际存放 Vant Weapp 资源的位置[^4]。
4. 修改 manifest.json 添加自定义组件声明
打开 manifest.json 文件，在 "usingComponents" 字段内加入所需使用的 Vant Weapp 组件名称及其对应的本地路径映射关系。例如要使用按钮组件，则配置如下所示：
{
...
"usingComponents": {
"van-button":"/wxcomponents/vant-weapp/button/index"
}
}
登录后复制
这一步骤非常重要，因为只有经过这样的设置后，才能让编译器识别来自第三方库的自定义标签名[^5]。
5. 使用组件实例
最后可以在模板里像下面这样直接调用已注册好的组件了:
<template>
<view class="container">
<!-- 这里的 van-button 是之前在 manifest.json 中定义过的 -->
<van-button type="primary">主要按钮</van-button>
</view>
</template>
登录后复制
完成以上步骤之后重新构建运行应用即可正常使用 Vant Weapp 提供的各种 UI 控件了。