微信小程序中安装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 组件库就成功安装并可以在微信小程序中使用了。

相关推荐
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1212 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero2 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉2 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code2 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
666HZ6663 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss