通过npm引入第三方依赖

步骤

微信开发工具版本

项目根目录创建.npmrc文件

# 将默认npm仓库修改为淘宝. 默认值为: https://registry.npmjs.org/
registry=https://registry.npmmirror.com

在项目根目录执行

npm init
npm install

修改project.config.json文件

...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],
...

重新打开项目

构建npm

引入vant-weapp

引入资源

npm i @vant/weapp -S --production

将 app.json 中的 "style": "v2" 去除

如果是ts项目, 则修改tsconfig.json文件

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
  }
}

不要怀疑，这里"@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]就是这么写即可

使用vant-weapp

miniprogram\app.json

{
    ...
    "usingComponents": {
        "van-button": "@vant/weapp/button/index"
     }
}

在页面中使用

index.wxml

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

再次构建npm

最终效果

参考资料

快速上手 - Vant Weapp (gitee.io)