微信小程序引用vant ui

本文主要是介绍微信小程序引用vant ui，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、 微信小程序空白地方右键 → 在外部终端窗口打开

二、 通过 npm 安装

npm init
npm i @vant/weapp -S --production

三、 修改 project.config.json

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

四、 构建 npm 包

打开微信开发者工具，点击 工具 -- 构建 npm，构建完成后，可引入组件

五、 引入组件

以 button 组件为例，在app.json或index.json中配置 button 对应的路径即可

// app.json
{
    ...

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

}        

六、 使用组件

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

这篇关于微信小程序引用vant ui的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！