微信小程序以“npm”方式使用有赞组件 vant

官方文档

地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

前提

说明

以下运行环境均为windows

环境

• 安装小程序开发工具（略）

• 安装node.js（略）

步骤

一、创建微信小程序项目（略）

二、在小程序目录下创建 node_modules 文件夹

三、在小程序目录下，CMD执行命令初始化

npm init

四、在小程序目录下，CMD执行命令，安装有赞组件

npm i vant-weapp -S --production -verbose

五、构建npm（不要问什么意思，大概是生成微信格式吧，照做）

构建完成会有个提示，表示做完了，没啥用

image

六、在小程序项目设置里面，勾选“使用 npm 模块”选项（如图）

image

七、正题：使用组件

1. 假设页面叫 t，在t.json添加组件声明（和普通使用组件一样样）

   
   
   image

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

2. 在t.wxml 中使用按钮（van-button）

按钮

完成

不是原创，只是整理了，部分图片来源参 [[参考链接](#微信小程序 没有找到 node_modules 目录)]

参考：

• 微信小程序 没有找到 node_modules 目录 https://blog.csdn.net/u014726163/article/details/82898428