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

一、确认电脑是否安装 node.js

 1、打开电脑终端

命令提示符（CMD）是Windows系统中的一种终端工具，可以用于执行各种系统命令和程序。在某些情况下，打开CMD可能非常有用，例如需要执行一些系统维护任务或调试代码时 

方法一：通过Powershell窗口打开

1、按住 shift 键，鼠标右键单击，选择 “在此处打开Powershell窗口” 并点击

方法二：通过快捷键打开

在Windows系统中，按下“Win”键（即带有Windows标志的键）。输入“cmd”搜索应用，点击 以管理员身份运行。此时，CMD窗口将会弹出并等待你的命令输入。 

2、输入 node -v  点击回车

若出现 v18.1.0 类似这种版本号则说明已经安装 node ,反之则没有安装，如下图就是没有安装给的提示

 

二、安装 node.js

官网地址： Node.js (nodejs.org)

1、进入官网，选择长期维护版进行下载

 2、安装的时候直接点击下一步就行，不建议修改安装的路径

3、安装后可以打开电脑终端，输入node -v  点击回车，就可查看安装的版本

三、引入 Vant Weapp 组件库

官网地址：Icon 图标 - Vant Weapp (gitee.io)

方法一

1、通过 npm 安装

复制②的代码 

2、微信开发者工具 对应小程序的代码包里引入

方法一：单击右键，选择 “在外部终端窗口中打开” 并点击，粘贴刚刚复制的代码

如果报错的话先重启电脑然后输入刚刚复制的 npm i @vant/weapp -S --production

node包安装成功后会出现以下几个文件

2、修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3、修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

4、构建 npm 包