一. 在微信小程序终端输入
npm init -y
二. 使用npm安装vant-weapp
npm i @vant/weapp -S --production
运行完之后会生成一个node_modules文件夹,与pages同级
三. 在左上角工具选项构建npm
构建成功后会生成miniprogram_npm文件夹,也与pages同级
勾选此项
构建的时候要是出现没有找到可以构建的npm包.
使用 w+r 运行 cmd 进入小程序的根目录 运行npm init
接着运行 npm i miniprogram-sm-crypto --production
接着回到微信开发工具构建npm
四. 在app.json里引入相关组件
"usingComponents": {
"van-button": "./miniprogram_npm/vant-weapp/button/index"
}
此处注意如果出现此错误
一般都是引入组件的时候路径错误.检查路径即可.
即可在相关页面使用weapp的组件.
如果想重写相关样式例如<van-button></van-button>
在相关wess里.重写该类样式即可
.van-button{
//样式
}
vue项目重写vant的话貌似要在样式前加:: v-deep
::v-deep .van-button{
//样式
}
可以动手尝试