小程序引入第三方组件库Vant Weapp

最近在看小程序中引入第三方组件相关知识，在引入过程中一直出现各种问题和报错最终终于成功暗中使用；以下为 npm安装的步骤及安装过程中可能的报错和小编认为的原因。

vant-weapp中文文档：https://youzan.github.io/vant-weapp/

1、打开微信开发者工具，选择目录 > 输入APPID > 确定

2、在文件根目录下右键 (一定要是根目录) > 选择在内建终端中打开

一定要是根目录，如果不是根目录可以使用cd进行切换 cd ../ 切换到上一层

4、我在这里使用的是npm安装

1：初始化

npm init

2：安装依赖

npm install --production

3：安装使用npm安装组件
 npm i @vant/weapp -S --production
或者  npm i vant-weapp -S --production

两者区别（安装后需要引入的路径有区别）

使用 npm i @vant/weapp -S --production  安装，引入时候；也就是文档中的方法，可直接复制文档

{
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
}

使用 npm i vant-weapp -S --production 安装，引入时候

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/vant-weapp/button/index"
  }
}

npm init时，一路回车

在这里我是用的是第一种方式依引入

5、在微信开发者工具中选择详情 > 本地设置 >勾选使用 npm模块

工具 > 构建 npm

构建完后生成一个miniprogram_npm文件，因为我是使用第一种方式安装vant所以这里下边的文件目录是@vant

6、使用vant-weapp

直接按照文档的复制使用即可 https://youzan.github.io/vant-weapp/

使用前一定要将app.json文件中的 "style": "v2", 小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。（组件文档中也提到过）

在对应页面的app.json或index.json引入组件
我是用 npm i @vant/weapp -S --production这种方式安装的，所以引入路径可以直接使用文档上，直接粘贴，不需要修改路径

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" dot />
  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
  <van-goods-action-icon icon="shop-o" text="店铺" />
  <van-goods-action-button text="加入购物车" type="warning" />
  <van-goods-action-button text="立即购买" />
</van-goods-action>

wxml中

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" />
  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
  <van-goods-action-icon icon="shop-o" text="店铺" />
  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />
  <van-goods-action-button color="#7232dd" text="立即购买" />
</van-goods-action>

end~~最后附上小编在安装过程中遇到的一些列问题（当然也是因为小编比较菜）附上链接，暂时整理了这两个，如有其他可以留言小编

https://blog.csdn.net/weixin_47426557/article/details/119803810?spm=1001.2014.3001.5501

小程序引入第三方组件库Vant Weapp

悦读