1、首先初始化并安装,记住按照这个顺序来,不要错了
npm init //一路回车
npm install --production
npm i @vant/weapp -S --production
使用cmd后输入npm init 出现的界面一路回车就行

2、在小程序的本地设置勾选使用npm

3、 在小程序工具--构建npm

4、构建成功后会出现miniprogram_npm文件夹

5、引用vant组件
//在对应页面的json
"usingComponents": {
"van-icon": "@vant/weapp/icon/index",
"van-search": "@vant/weapp/search/index"
}
<van-search shape="round" custom-class="search-box" background="none" readonly="{{ true }}" placeholder="请输入产品或门店" bindtap="jumpSearch" />
5.1、在app.css中引用vant内置样式css,按照官网的“@import '@vant/weapp/common/index.wxss';”路径报错找不到,修改为如下路径
@import '/miniprogram_npm/@vant/weapp/common/index.wxss';
5.2: 将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。
6、成功
————————————————
版权声明:本文为CSDN博主「余温无痕」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u014678583/article/details/106971149/
网友评论