微信小程序 引入vant Weapp组件库的问题及处理方式

1、首先初始化并安装,记住按照这个顺序来,不要错了


npm init  //一路回车
npm install --production
npm i @vant/weapp -S --production

使用cmd后输入npm init 出现的界面一路回车就行 

微信小程序 引入vant Weapp组件库的问题及处理方式_第1张图片

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

微信小程序 引入vant Weapp组件库的问题及处理方式_第2张图片

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

微信小程序 引入vant Weapp组件库的问题及处理方式_第3张图片

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

微信小程序 引入vant Weapp组件库的问题及处理方式_第4张图片

5、引用vant组件

//在对应页面的json
"usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "van-search": "@vant/weapp/search/index"
 }

 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、成功

 

你可能感兴趣的:(小程序,vue)