一、使用 npm 包 - Vant Weapp
前面对学习到的自定义组件等相关内容进行了一个总结。接下来就来学习小程序中的使用 npm 包 - Vant Weapp。话不多说，让我们原文再续，书接上回吧。
目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制：
- 不支持依赖于 Node.js 内置库的包。
- 不支持依赖于浏览器内置对象的包。
- 不支持依赖于 C++ 插件的包。
由于限制太多，所以能供小程序使用的包基本上为数不多。
1、Vant Weapp
Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议，对商业使用比较友好，更多详细内容可以看一下 官方文档地址。
2、安装 Vant 组件库
在小程序项目中，安装 Vant 组件库主要分为如下 4 步：
- Step 1、 通过 npm 安装（建议指定版本为@1.3.3，以防出现不必要的问题）。
通过 npm 安装
npm i @vant/weapp -S --production
通过 yarn 安装
yarn add @vant/weapp --production
安装 0.x 版本
npm i vant-weapp -S --production
安装之前，要确认是否有包配置管理文件，没有的话需要初始化包管理配置文件，初始化指令：npm init -y 。
初始化包配置文件成功之后就会出现这个文件。
接下来就是通过命令来安装 npm 包了，这里要指定安装版本为 1.3.3。
安装成功之后就会出现该文件夹。
- Step 2、 修改 app.json。
将 app.json 中的
"style": "v2"去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
- Step 3、 修改 project.config.json
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] } }
注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm 构建的文件目录为 miniprogram_npm，并且开发工具会默认在当前目录下创建 miniprogram_npm 的文件名，所以新版本的 miniprogramNpmDistDir 配置为’./'即可。
- Step 4、 构建 npm 包。
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
在开发者工具版本1.06.2301160下，是没有看到 使用npm模块 这个选项的。
如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。详细的操作步骤，可以参考 Vant 官方提供的 快速上手教程。
3、使用 Vant 组件
安装完 Vant 组件库之后，可以在 app.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中直接使用组件。这里以 button 组件为例，因为 button 使用的比较频繁，所以比较适合全局引用。具体代码如下：
app.json
{ "usingComponents":{ "van-button": "@vant/weapp/button/index" }, }
message.wxml
<van-button type="primary">van按钮</van-button>
可以来看一下运行效果：
4、定制全局主题样式
Vant Weapp 使用 CSS 变量来实现定制主题。 关于 CSS 变量的基本用法，请参考 MDN 文档 。
在 app.wxss 中，写入 CSS 变量，即可对全局生效，具体代码如下：
message.wxml
<van-button type="primary">van按钮</van-button> <van-button type="danger">按钮2</van-button>
app.wxss
page{ --button-danger-background-color:#C00000; --button-danger-border-color:#D60000; }
看到这里就会有疑问了，为什么要使用page 节点？为了让这些变量全局生效，要定义在根节点，而页面的根节点就是 page。为什么要这么命名？所有可用的颜色变量，请参考 Vant 官方提供的 配置文件 。
可以来看一下运行效果：
总结
感谢观看，这里就是使用 npm 包 - Vant Weapp的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
