第一步：检查环境
检查node.js和npm是否安装并且npm镜像源是否切换
第二步：设置微信小程序
在微信小程序详情里面勾选使用npm模块
第三步：在微信小程序项目的根目录下创建package.json
npm init -y
//这句话的意思是创建package.json文件并且全部yes
第四步:输入第三方组件库的安装npm命令
npm i @vant/weapp -S --production
//我这里安装的是vant组件
第五步:在微信小程序中构建npm包
在微信小程序里面选择工具里面的构建npm
第六步:检查vant是否引入成功
这时候会发现多了一个miniprogram_npm文件夹,查看下面是否有@vant文件夹
第七步:使用vant组件
//复制vant里面按钮到index.wxml
<van-button type="info">信息按钮</van-button>
//然后在app.json或index.json中引入组件
//写到index.json只能在当前页面用,写到app.json是所有页面都可用
//app.json默认没有usingComponents,所以需要自己复制过去
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
第六步:关闭微信小程序基础样式
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
