微信小程序中使用Vant组件
参考vant文档:https://youzan.github.io/vant-weapp/#/home
一、安装Vant
-
初始化npm
在项目的根目录打开终端
npm init -y
-
使用npm进行安装
二、配置json文件
-
首先要删除 app.js 文件中的 style
-
修改project.config.json 文件
"packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ]
三、构建npm包
- 安装完成后会有一个node_modules文件夹,你下载的组件就在这个目录中
-
但是,微信小程序默认不能直接使用node_modules里面的工具
在 微信开发者工具中点击 详情->本地设置->使用npm模块
-
在从工具中构建npm
构建完成之后会提示
四、使用
引入组件,以button按钮作为示范,其余的组件引入方法一致
如果许多页面都要用的话,就将组件引入到app.json中
在pages 和window字段同级写入
"usingComponents":{
"vant-button":"path/to/@vant/weapp/lib/button/index"
}
如果只在单页面使用的话,只需在本页面的json文件中引入就可以