小程序引入 Vant Weapp并转换px成rpx

新建微信小程序项目

1. 在内建终端打开 ，鼠标对着目录右键；

2. 命令行输入npm init 一直回车键到结束 ；

3. 

4. 命令行接着输入 npm install --production

5. 接着输入安装 vant/weapp的命令行 npm i @vant/weapp -S --production； （npm i vant-weapp -S --production 或者 npm i @vant/weapp -S --production 是有区别的 在后期引入组件时候 地址不是@/vant…这种写法）

6. 接着就生成了 这三个文件

7. 微信开发者工具 进行设置使用npm模块；

8. 工具 构建npm ；

9. 构建成功后多出一个文件夹 miniprogram_npm ；

10. 接下来引入需要的组件 比如我这个 按钮组件 在 app.json或者页面.json (记得把app.json里面的**“style”:“v2”** 去掉)。

11. 去Vant Weapp官网套一点 自己想要的元素样式，比如这个button 需要什么 就提前引入：

此时虽然已经能用了但是vant的尺寸单位在小程序这边还是 px 需要改成rpx 更为方便小程序后期的开发

1. 需要借助第三方 插件来修改 右键选择在内建终端打开 命令行接着输入 npm install gulp gulp-postcss postcss-pxtransform --save-dev回车 等待下载

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/'));
 
});

3. 在刚刚下载的第三方插件包里面找到一个文件名叫postcss-pxtransform的文件夹里的index.js进行一小段的代码修改（修改后 在运行 npm run build）

最后再去开发者工具顶部的工具 里面 进行多一次构建npm就可以了