微信小程序引用vant Weapp

 vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/quickstart

第一步：在微信小程序安装vant组件  npm i vant-weapp -S --production

注意：安装成功后会生成node_modules文件，这个文件貌似没什么用，留在代码包里反倒会占用体积，后续构建成功后可以删掉

 第二步：在小程序的根目录执行npm init一路回车yes生成package.json文件

 第三步：构建npm：在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”，等待构建完成

这里注意下，构建成功就会生成一个默认名称为miniprogram_npm的文件夹。这个文件夹可以自定义命名的，为了更语义化，我通常会命名为vantComponent

 

 第四步：在需要使用的页面json文件中引入组件

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/@vant/weapp/button/index",
    "van-field": "../../miniprogram_npm/@vant/weapp/field/index",
    "van-search": "../../miniprogram_npm/@vant/weapp/search/index"
  }
}

效果：

可能会出现的问题：

这种问题，我出现过是因为npm构建虽然成功，但是没生成 miniprogram_npm，所以一直报错，解决方法为多尝试构建几次就好了。此外，路径引用写错了，也会出现上述情况。