关于在小程序中下载vant遇到的坑

246 阅读1分钟
  1. 安装npm过程中没有出现package.json文件

解决方案:在外部终端重新安装npm,安装语句为

image.png

npm init -y

npm install

安装成功后,显示文件如下

image.png

  1. 构建npm失败

错误:packageJsonPath 需以 package.json 结尾, "./node_modules/@vant/weapp/package" 是不合法的

解决方案:查看路径是否写正确 在project.config.json文件中修改值如下

    "packNpmManually"true,

    "packNpmRelationList": [

      {

        "packageJsonPath""./package.json",

        "miniprogramNpmDistDir""./"(写的是npm要存放的路径,如果是项目根目录下面./即可)

      }

    ],

!!这里需要注意的是如果更改后还是原来的路径,需要将小程序关闭之后重新打开。若还是成功不了则清理一下缓存。

image.png

3.引用组件步骤

①在app.json添加引用

 "usingComponents": {

    "van-button":"@vant/weapp/button/index"

  },

②在界面中使用

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