微信小程序引用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>

　　

 

标签：npm,...,vant,微信,button,json,ui,组件
来源： https://www.cnblogs.com/zhangyuxin219/p/16312971.html