微信小程序安装vant-weapp，将vant的px转成rpx_uniapp 引入vant-weapp 单位转换rpx-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40544434/article/details/122126061

本文详细介绍了Vant-WeApp组件库的安装流程及使用方法，包括npm初始化、配置修改、构建npm包等步骤，并提供了将组件单位从px转换为rpx的方法。

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

Vant-weapp官网地址：https://vant-contrib.gitee.io/vant-weapp/#/home
安装：

一、npm init （这是初始化，一定要做，否则不能安装，官网没说。）一路回车。

在这里插入图片描述

二、npm安装

npm i @vant/weapp -S --production

在这里插入图片描述

三、修改app.json

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

四、修改project.config.json

1）将‘packNpmManually’改为true
2）手动添加如下代码，保证能正确索引到npm依赖的位置。

"packNpmRelationList": [
     {
           "packageJsonPath": "./package.json",
           "miniprogramNpmDistDir": "./../new1"
    }
],

五、构建npm包

打开微信开发者工具，工具->构建npm，并在本地设置中勾选‘使用npm模块’，构建完成后，即可使用vant组件。
在这里插入图片描述
构建成功后会出现miniprogram_npm文件夹

至此：安装完成，接下来使用：
那个页面使用组件，需要在这个页面对应的.json文件中引入

使用：

看调试器，vant组件中使用的单位都是px，而小程序中实际应该全部使用rpx，所以需要统一将vant中的单位进行转换。转换步骤如下：
在这里插入图片描述

vant-weapp的px转成rpx

安装gulp gulp-postcss postcss-px2units

npm install gulp gulp-postcss postcss-px2units --save-dev

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits = require('postcss-px2units');
gulp.task('css', function () {
    return gulp.src(['miniprogram_npm/@vant/weapp/**/*.wxss'])
        .pipe(postcss([pxtounits({
            multiple: 2,
            targetUnits: 'rpx'
        })]))
        .pipe(gulp.dest('miniprogram_npm/@vant/weapp/'));
});