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

直接在微信小程序开发工具中进行构建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异常,删除即可

在这里插入图片描述


版权声明:本文为misterdongjing原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。