微信小程序 构建 npm

微信小程序 构建 npm，个人感觉官网写的并不是很详细，这里记录一下

在使用 npm 前，先确保电脑已经安装了 nodejs 环境，没有安装的可以参考：https://blog.csdn.net/wsjzzcbq/article/details/89556569

 

1、进入项目目录，初始化项目

进入项目目录，我的小程序项目名是 xcx-vant

在项目目录打开 cmd 命令窗口，执行 npm init 命令，或 cnpm init 命令（已安装cnpm）

npm init

或

cnpm init

笔者这里使用 cnpm init 命令

一直默认回车

执行完成后，会生成 package.json 文件

 

2、安装依赖

这里安装你想要安装的依赖，笔者这里以 vant-weapp 为例

npm i @vant/weapp -S --production

执行安装命令

安装完成

安装完成后，会生成 node_modules 文件夹

 

3、构建 npm

打开 微信小程序开发者工具，找到 详情、本地设置、使用 npm 模块

勾选  使用 npm 模块

点击 工具、构建 npm

构建成功

构建成功后，项目中会生成 miniprogram_npm 文件夹

 

4、测试代码

在页面的 json 文件中添加 van-button 按钮 配置

注意：这里的 van-button 路径为 miniprogram_npm 文件夹下 button 的 index 路径

在页面中引入 van-button ，效果如图