记录mpvue+vant-weapp的使用（一）：安装配置使用，引入vant-weapp

2020-8-7前来更新-------------------------------------------

放上成品，能够参考参考：

 

以前用vue用的比较习惯，比较喜欢里面的组件式开发，能少写一些复用的代码，因而尝试一下美团的mpvue来开发小程序。

官网：http://mpvue.com/mpvue/quickstart.html

部署教程官网里面的就能够了。

而后，mpvue只是提供了代码编辑的框架而已，里面的组件之类须要第三方的组件库，我看到基本上用的vant-weapp的比较多，因而也打算尝试一下。want-weap支持小程序和app，这里要注意不要使用vant，要用vant-weapp

vant-weapp官网：https://youzan.github.io/vant-weapp/#/tab

"mpvue": "^2.0.0"

"vant-weapp": "^0.5.28"

"vuex": "^3.0.1"

这是个人各个模块的版本。

遇到第一个问题：小程序是使用rpx来适配的，px转rpx的问题

最新版本的mpvue是自带px2rpx的，因此css里面的px能够自动转化成rpx

具体的转化比例修改：

找到这个能够本身修改

var px2rpxLoader = {
    loader: 'px2rpx-loader',
    options: {
      baseDpr: 1,
      rpxUnit: 0.5
    }
  }

可是有个问题是，npm引入的vant-weapp 是没有编译到的。因此这里须要将want-weapp的内容搬到static里面，

而后找到

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'),
    //     ignore: ['.*']
    //   }
    // ]),
    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: ['.*']
      }
    ]),

能够看到按钮的样式变成了rpx。

也能够查看编译以后的dis里面的vant-weapp模块的css

本质上是将css里面的px统一替换成rpx而已。