微信小程序通过npm引入组件库Vant Weapp并使用
1、在所建项目的根目录下初始化包配置管理文件
npm init -y
2、根目录下新建 node_modules 文件夹
mkdir node_modules
3、cd node_modules 进入新建的 node_modules,安装npm包（这里安装的是Vant Weapp）
npm i @vant/weapp -S --production
4、点开微信开发者工具左上角的 工具-->选中构建npm
image.png
image.png
5、去除app.json里的 "style": "v2" ，因为小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱
6、使用vant组件
- 在app.json的usingComponents节点中引入需要的组件，然后可在wxml中直接使用组件。
//app.json
...
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-cell": "@vant/weapp/cell/index",
...
}
...
//index.wxml
<view>
<van-button type="default">默认按钮</van-button>
</view>
本文标题：微信小程序通过npm引入组件库Vant Weapp并使用
本文链接：https://www.haomeiwen.com/subject/xhgakrtx.html
网友评论