微信开发者工具如何引入 Vant weapp框架

最新推荐文章于 2025-01-13 15:38:04 发布

程序猿……

最新推荐文章于 2025-01-13 15:38:04 发布

阅读量345

点赞数 1

文章标签：编辑器

本文链接：https://blog.youkuaiyun.com/hangequan/article/details/129742312

版权

文章介绍了如何在微信小程序中集成VantWeapp组件库，包括使用npm或yarn初始化，修改app.json和project.config.json以适应npm构建，手动配置npm包路径，以及在构建完成后如何引入并使用组件如Button。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：切记不要起中文名字，容易报错。

先初始化 npm init -y

npm:用 npm i @vant/weapp -S --production

yarn 用 yarn add @vant/weapp --production

3. 修改 app.json

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

4.修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

5.步骤四构建 npm 包

打开微信开发者工具，点击工具 -> 构建 npm

6.已经好了在引入就行了以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

// 通过 npm 安装

// app.json

"usingComponents": {

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

}