微信小程序使用npm包的方法步骤

fanwan-7

已于 2022-07-08 17:19:26 修改

阅读量1.4w

点赞数 12

文章标签： npm 微信小程序小程序

于 2022-02-16 14:31:40 首次发布

本文链接：https://blog.csdn.net/csdnsunyue/article/details/122962764

版权

本文详细介绍了如何在微信小程序中使用npm包，包括npm初始化、 vant-weapp UI组件库的安装、设置本地构建npm模块以及解决package.json找不到的问题。通过这些步骤，读者将能够成功在小程序项目中集成和使用npm包。

摘要由CSDN通过智能技术生成

提示：用于自己学习

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、npm初始化

如果你的小程序项目没有安装过npm包的话，你需要先初始化npm

npm init

二、安装npm包

这里以vant-weapp(小程序UI组件库)为例：

npm i vant-weapp -S --production

三、npm包构建

1：点击微信开发者工具右上角详情——>本地设置，选中使用npm模块

在这里插入图片描述
修改相关参数

2：点击微信开发者工具菜单栏的工具，选择构建npm
在这里插入图片描述
当显示如下表示npm构建成功，构建完成就可以使用npm包了

在这里插入图片描述

npm包构建完成之后项目的结构如下：
在这里插入图片描述

四、报错未找到package.json

在根目录下创建package.json

{
  "name": "", //自定义
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vant/weapp": "^1.10.3",
    "crypto-js": "^4.1.1",
    "miniprogram-sm-crypto": "^0.3.8"
  },
  "devDependencies": {},
  "description": ""
}