在vue移動端使用lib-flexible和px2remLoader適配屏幕

　　在對移動端的適配過程中，之前一直用的rem來進行，通過自己封裝一個rem的計算函數來對整個項目進行適配。現在發現了一種更為簡單，也更加方便的方式來對移動端進行屏幕的適配。

• 　　下載lib-flexible

• cnpm i lib-flexible --save -dev
  

  　　

• 在整個項目的入口文件引入lib-flexible

• import 'lib-flexible'

   

• 安裝px2rem-loader

• cnpm install px2rem-loader --save -dev

   

• 在webpack中進行配置，扎到項目build/utils.js文件進行修改

• const cssLoader = {
      loader: 'css-loader',
      options: {
        minimize: process.env.NODE_ENV === 'production',
        sourceMap: options.sourceMap
      }
    }
  
  const px2remLoader = {
      loader: 'px2rem-loader',
      options: {
        remUnit: 75 //默認換算為1rem為75px，可根據你的原型圖修改
      }
  
    }

  

• 到這里我們的工作就完成了，你可以根據設置的換算大小來直接項目中使用px作為單位