微信小程序中安装vant

以下是微信小程序中安装 Vant 的详细步骤:

1. 初始化项目

在微信小程序项目目录下,打开终端,执行以下命令进行项目初始化:

bash 复制代码
npm init -y

该命令会快速生成一个默认的package.json文件,-y参数表示直接使用默认配置,无需手动输入信息。

2. 安装 Vant 相关依赖

继续在项目目录下的终端中,执行以下命令安装 Vant Weapp:

bash 复制代码
npm i @vant/weapp -S --production

此命令会将 Vant Weapp 作为项目的生产依赖安装到node_modules目录中。

3. 修改app.json

打开项目根目录下的app.json文件,找到并删除其中的"style": "v2"字段。因为小程序的新版基础组件会强行加上许多样式,难以覆盖,不删除可能会导致部分组件样式混乱。

4. 修改project.config.json

由于微信开发者工具创建的项目中,miniprogramRoot默认为miniprogram,而package.json在外部,导致 npm 构建无法正常工作。需要在project.config.json文件中手动添加以下配置,以便开发者工具可以正确索引到 npm 依赖的位置:

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

注意:对于新版开发者工具,miniprogramNpmDistDir配置为"./"即可。

5. 构建 npm

打开微信开发者工具,点击"工具"->"构建 npm",并勾选"使用 npm 模块"选项。构建成功后,即可在项目中使用 Vant 组件。

6. 使用组件

全局引入

app.json中添加需要使用的组件路径,例如:

json 复制代码
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
}

这样,在任意页面的wxml文件中都可以直接使用van-button组件。

局部引入

如果只想在某个页面使用某个组件,可以在该页面的json文件中进行引入,例如:

json 复制代码
{
    "usingComponents": {
        "van-slider": "@vant/weapp/slider/index"
    }
}

然后在该页面的wxml文件中使用van-slider组件。

至此,Vant 组件库就成功安装并可以在微信小程序中使用了。

相关推荐
晓风伴月2 小时前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序
新酱爱学习4 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
军军君017 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
两个月菜鸟7 小时前
微信小程序进度条cavans
微信小程序·小程序
從南走到北7 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
mg66810 小时前
微信小程序入门实例_____从零开始 开发一个每天记账的微信小程序
微信小程序·小程序
sanhuamao10 小时前
Taro+nestjs+mongodb实现健身记录微信小程序
微信小程序·taro·nestjs
转转技术团队15 小时前
微信小程序 Skyline 渲染引擎解析:如何突破 WebView 的性能天花板
微信小程序
拼图2091 天前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序