微信小程序 引入外部UI组件 Vant Weapp

微信小程序 引入外部UI组件 Vant Weapp

Vant Weapp官网地址：
https://youzan.github.io/vant-weapp/#/intro

1.下载Vant Weapp
npm i vant-weapp -S --production
下载好的文件在：项目文件/node_modules/vant-weapp

2.构建npm包工具

3.使用Vant组件，需要在相对应的.json文件里添加配置

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

4.在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

这时候会发现报错信息
jsEnginScriptError Component is not found in path “path/to/vant-weapp/dist/button/index” (using by “pages/fuwugailan/fuwugailan”);onAppRoute
Error: Component is not found in path “path/to/vant-weapp/dist/button/index” (using by “pages/fuwugailan/fuwugailan”)

解决办法是：
①把下载好的node_modules/vant-weapp/dist 文件夹，dist复制到自己项目中的根目录中。
②需要修改使用Vant组件，相对应的.json文件

{
  "usingComponents": {
    "van-button": "../../dist/button/index" // 修改为自己的项目路径
  }
}