微信小程序通过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>