微信小程序 引入Vant Weapp组件库，并将px转化成rpx

1、初始化并安装

npm init  //一路回车
npm install --production
npm i @vant/weapp -S --production

使用cmd后输入npm init 出现的界面一路回车就行

2、在小程序的本地设置勾选使用npm

3、 在小程序工具–构建npm

4、构建成功后会出现miniprogram_npm文件夹

5、引用vant组件

//在对应页面的json
"usingComponents": {
  "van-icon": "@vant/weapp/icon/index",
  "van-search": "@vant/weapp/search/index"
}

<van-search />

5.1、在app.css中引用vant内置样式css，按照官网的“@import ‘@vant/weapp/common/index.wxss’;”路径报错找不到，修改为如下路径：

@import '/miniprogram_npm/@vant/weapp/common/index.wxss';

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

6、将vant weapp组件的单位px转换成rpx

6.1、npm install gulp gulp-postcss postcss-pxtransform --save-dev

6.2、在根目录新建gulpfile.js文件

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var pxtorem = require('postcss-pxtransform')

gulp.task('css', function () {
  var processors = [
    pxtorem({
      platform: 'weapp',
      designWidth: 750
    })
  ]
  return gulp.src(['miniprogram_npm/@vant/**/*.wxss']).pipe(postcss(processors)).pipe(gulp.dest('miniprogram_npm/@vant/'))
})

6.3、在package.json 下面的scripts添加一个执行命令"build": "gulp css"

"scripts": {
  "build": "gulp css",
  "test": "echo \"Error: no test specified\" && exit 1"
}

6.4、找到node_modules/postcss-pxtransform/index.js：

// 修改前
const deviceRatio = {
  640: 2.34 / 2,
  750: 1,
  828: 1.81 / 2
}
// 修改后
const deviceRatio = {
  640: 2.34,
  750: 2,
  828: 1.81
}

6.5、小程序开发工具中选择 【工具】=>【构建npm】，命令行中执行npm run build。就此已经将px转化成了rpx