微信小程序（二十）Vant组件库的配置

news2025/1/20 3:55:43

教程很详细，直接上过程

官方文档也有，但是因为版本的更新，官方文档并没有跟着改变，这里我写一份最新版能用的教程

（口头禅还是不能少的🤣🤣🤣）

灵魂拷问：你安装了`Nodejs`吗?

😎😎😎没安装的先看这位大佬的博文Nodejs的安装与配置😎😎😎

安装好了正式进入主题

1. 初始化npm

原因：为了生成json文件记录安装依赖的依赖的有关信息

在这里插入图片描述

输入以下语句

npm init

如果出现终端无法输入的情况，先重启开发者工具，如果还是无效可以使用外部终端,如下（正常输入可以忽略）

在这里插入图片描述

此时会出现这个配置文件

在这里插入图片描述

2. 通过 npm 安装

输入以下内容

npm i @vant/weapp -S --production

报错了？一堆红色的错？

回想一下在前面的Node安装的博文里面的内容，是不是下载需要使用管理员权限
在cmd打开管理员窗口简单但在开发者工具终端怎么办呢
解决方法：（博文里面提到过的）
修改node_global和node_cache文件夹的属性（此处演示一个，另一个同理）

在这里插入图片描述
修改完成后重新打开一下开发者工具，在终端输入前面说的的内容

等待ing（因人而异，有的是一会，有的是亿会）

在这里插入图片描述

3.去掉`app.js`里面的`"style": "v2"`这句

在这里插入图片描述

4.修改 `project.config.json`

在这里插入图片描述

 "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

坚持坚持，最后一步了（从nodejs的下载配置到小程序组件的配置确实挺繁琐的🤣）

5.构建 npm 包

在这里插入图片描述

手痒痒不小心删了的只要重复第五步再构建一遍就行🤣🤣🤣

测试是否成功

这里先`重启`一下`开发者工具`

npmTest.json

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

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>