微信小程序中使用vant weapp

微信小程序中使用vant weapp

正文开始

1. 打开微信开发者工具到项目中

2. 打开终端输入 npm init 然后一直回车（默认）直至-Is this OK? (yes) 输入y

3. 然后输入 package 回车

4. 输入 npm init -y 回车

5. 安装vant weapp 代码：npm i @vant/weapp -S --production

6. 点击最上方工具->构建npm

7. 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

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

9. 开发者工具中右上角详情-本地设置找到使用npm模块，然后点击工具构建npm

10. 在app.json或index.json中引入组件，详细介绍见快速上手

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

10. <van-button type="default">默认按钮</van-button>编译后成功