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

1、在当前小程序项目目录

npm init -y 构建npm项目

2、运行命令 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>

重新编译项目 发现 已经正常引用了!!
在这里插入图片描述

文章源自:
https://juejin.cn/post/6844904064828850189

GitHub 加速计划 / va / vant-weapp
12
3
下载
轻量、可靠的小程序 UI 组件库
最近提交(Master分支:4 个月前 )
b7b1d5f9 Co-authored-by: liuhaihong <liuhaihong@youzan.com> 8 个月前
6eb5f272 Co-authored-by: liuhaihong <liuhaihong@youzan.com> 8 个月前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐