mp-vue项目中引入vant-weapp

1.克隆vant仓库

git clone https://github.com/youzan/vant-weapp.git

将dist目录下的所有文件复制到你项目的/static/vant/目录下。

image.png

2.引入

在需要引入的页面目录下的****.json文件中

{
  "usingComponents": {
    "van-button": "../../../static/vent/button/index", //相对路径，很关键
  }
}

3.使用

测试

4.mpvue中引用Vant-weapp时，没有把原来的px转换成rpx问题解决办法

修改前:build\webpack.base.conf.js

new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: path.resolve(config.build.assetsRoot, './static'),
    ignore: ['.*']
  }
])

修改后：build\webpack.base.conf.js

var Px2rpx = require('px2rpx')
var px2rpxIns = new Px2rpx({ rpxUnit: 0.5 })
...
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: path.resolve(config.build.assetsRoot, './static'),
    transform(content, path) {
      if (path.endsWith('.wxss')) {
        return px2rpxIns.generaterpx(content.toString(), 1)
      } else {
        return content
      }
    },      
    ignore: ['.*']
  }
])

然后重启项目，static中的wxss中的px也会转换为rpx了