小程序中构建npm
- 首先先检查是否安装了npm 没有安装npm需要安装npm
npm -v
注意点:当node环境配置在了c盘的情况下 会导致在使用npm下载插件时打不开c盘文件夹 导致安装失败的情况 小程序开发者工具需要管理员权限运行 也可以重新配置一次nodejs环境到其他盘(我懒 我就管理员运行了)
- 初始化项目
npm init -y
- -y 表示项目选项全部默认
- 此时不会出现
miniprogram_npm
文件夹 这一步只是为了package相关的文件
- 下载相关依赖 例:vant
npm i @vant/weapp -S --production
- 构建npm
微信开发者菜单栏的工具 → 构建npm
- 此时会就出现
miniprogram_npm
文件夹了 - 我没有打开开发者工具设置中的使用npm模块 也能照常使用下载的依赖 不过为了以防万一 还是推荐打开
- 使用vant
再对应page的json文件中配置 需要使用的对应组件 van-button
也可以再app.json中全局配置使用频繁的组件 就不需要单独再次再对应page中引用配置了
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
因为是npm下载 所以路径是@vant/...
开头也能找到组件
在wxml中使用即可
<van-button type="primary">按钮</van-button>
注意点:根据官方文档说明 为了防止样式混乱 需要将app.json
中的 "style": "v2"
去除