微信小程序引入Vant Weapp详细步骤

最新推荐文章于 2024-05-04 15:40:01 发布

Greenhand_BN

最新推荐文章于 2024-05-04 15:40:01 发布

阅读量963

点赞数

分类专栏：小程序文章标签：前端小程序 ui

本文链接：https://blog.youkuaiyun.com/Greenhand_BN/article/details/115030447

版权

小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Vant Weapp组件库搭建微信小程序项目，包括初始化项目、安装依赖、配置构建选项及使用组件的具体步骤。

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

1、新建一个文件夹，并且用微信开发者工具新建小程序快速模板
2、在新建的文件夹中，打开终端（在 VS Code 中的终端也一样），在终端中依次执行

       1、第一步：npm init

       2、第二步：npm install --production

       3、第三步： npm i @vant/weapp -S --production

执行 npm init，文件夹中会自动生成 package.json 文件
在这里插入图片描述

执行 npm install --production，文件夹中会自动生成 package-lock.json 文件
在这里插入图片描述
执行 npm i @vant/weapp -S --production ，安装 Vant Weapp

3、在微信开发工具中，执行npm 构建，并勾选使用 npm 模块选项

构建完会生成一个 miniprogram_npm 文件夹，构建完如果编译报错，再构建一次
在这里插入图片描述
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

修改 project.config.json ， setting 中 packNpmManually 与 packNpmRelationList 修改成如下

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

在这里插入图片描述
5、引入
以 Button 组件为例，只需要在 app.json 或者 wxml 对应的 json 文件中配置 Button 对应的路径即可（两个地方，放在任意一个地方即可）。

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

在这里插入图片描述

6、在WXML文件里直接使用

    <van-button loading type="info" loading-text="加载中..." />

在这里插入图片描述