記錄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而已。