微信小程序引入vant组件

    科技2026-06-04  12

    1 vant的网址

    http://vant-contrib.gitee.io/vant-weapp/#/switch

    2 在微信小程序目录中安装vant组件

    npm i vant-weapp -S --production

    3 在小程序的根目录执行npm init一路回车yes生成package.json文件

    4 .构建npm:在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”,等待构建完成

    5. 在json文件加入组件的引入

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

    在对应的页面的json上引入就可以

    注意路径的问题

    在vant上是

    "usingComponents": { "van-switch": "@vant/weapp/switch/index" } 需要将路径变为 ```xml "van-switch": "/miniprogram_npm/vant-weapp/switch/index"

    Processed: 0.018, SQL: 9