微信小程序npm构建+vant导入使用

小程序中构建npm

1. 首先先检查是否安装了npm 没有安装npm需要安装npm

npm -v

注意点：当node环境配置在了c盘的情况下 会导致在使用npm下载插件时打不开c盘文件夹 导致安装失败的情况 小程序开发者工具需要管理员权限运行 也可以重新配置一次nodejs环境到其他盘（我懒 我就管理员运行了）

2. 初始化项目

npm init -y 

• -y 表示项目选项全部默认
• 此时不会出现 miniprogram_npm 文件夹 这一步只是为了package相关的文件

3. 下载相关依赖 例：vant

npm i @vant/weapp -S --production

4. 构建npm

微信开发者菜单栏的工具 → 构建npm

• 此时会就出现 miniprogram_npm 文件夹了
• 我没有打开开发者工具设置中的使用npm模块 也能照常使用下载的依赖 不过为了以防万一 还是推荐打开

5. 使用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" 去除