微信小程序项目使用npm安装vant-weapp的正确步骤，简单易懂

QS8945

于 2021-05-17 14:57:56 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/qq_42753705/article/details/89492866

本文详细介绍了如何在微信小程序项目中使用npm安装并配置vant-weapp组件库，包括初始化项目、安装组件、配置使用等步骤，并给出了具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序项目使用npm安装vant-weapp的正确步骤
1、微信开发者工具新建小程序
2、在当前小程序项目目录

npm init

构建npm项目

3、运行命令

npm install vant-weapp -S --production

安装完发现在当前小程序目录下新增node_modules目录下面有了vant-weapp组件文件夹如下图：

3、详情里面：选中使用npm模块
在这里插入图片描述

4、进入微信开发工具：选择工具 -> 构建npm
在这里插入图片描述

5、下面以引入button组件到某页面为例子：
在此页面的.json中配置

"usingComponents": {
    "van-button": "../../miniprogram_npm/@vant/weapp/button/index"
  },

然后在此页码的wxml中

 <van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

重新编译项目发现已经正常引用