微信小程序开发工具使用npm构建三方类库的方法

本文介绍了在微信小程序开发工具中构建npm、引用三方类库的操作方法。包括创建测试项目、npm初始化、生成package - lock.json、安装三方类库、构建npm等步骤,还给出了运行异常时的处理办法,如删除提示异常的scripts。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

直接在微信小程序开发工具中进行构建npm,引用三方类库的操作方法

1,创建新的测试项目

在这里插入图片描述

2,在调试器–终端 添加终端,进行npm初始化

在这里插入图片描述
执行如下命令:

npm init

回车确认到结束,期间描述和作者等信息可以根据实际情况填写。执行完成后会生成 package.json 文件,回车填的信息也可以在此文件中手动修改
初始化npm截图
package.json截图

3,生成package-lock.json,记录使用的第三方插件

执行如下命令:

npm install --production

在这里插入图片描述

4,安装三方类库

演示使用 Vant Weapp
https://vant-contrib.gitee.io/vant-weapp/#/quickstart
在这里插入图片描述
执行安装命令:

# 通过 npm 安装
npm i @vant/weapp -S --production

安装成功后会自动将源码下载到项目的node_modules文件夹中
在这里插入图片描述

5,此时可以在微信小程序开发工具中构建npm了

选中 【使用npm模块】
在这里插入图片描述
点击 工具–构建npm
在这里插入图片描述
在这里插入图片描述

6,至此已经构建完毕,可以开始使用三方类库了

本例已使用 vant 中Button组件演示引入使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

运行异常处理 如果生成的package.json提示scripts异常,删除即可

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值