记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp

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

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

部署教程官网里面的就可以了。

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

记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp_第1张图片

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

具体的转化比例修改:记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp_第2张图片

找到这个可以自己修改

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

但是有个问题是,npm引入的vant-weapp 是没有编译到的。所以这里需要将want-weapp的内容搬到static里面,

然后找到记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp_第3张图片

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

记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp_第4张图片

可以看到按钮的样式变成了rpx。

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

记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp_第5张图片

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

你可能感兴趣的:(记录mpvue+vant-weapp的使用(一):安装配置使用,引入vant-weapp)