vue移動端flexible.js結合Muse-ui使用的小坑

  因為公司有個專案有webapp的需求，在前期準備的期間考慮過使用ionic，畢竟該專案web端的框架使用的是Angular，專案組的人也都比較熟悉，但是我們畢竟只是做個移動的網頁，不想用ionic那麼繁瑣的東西，最終我還是選了vue。
  開始的設想是vue+Muse-ui或者Mint-ui(各有優缺點)+flexible.js，在做到手機端相容的同時結合ui框架讓專案更好看些，然後就開始動手做！
  這個時候需要說下flexible.js，阿里開源的移動端適配程式碼，很好用，不過也有他的缺點，比如不相容ipad，因為公司的專案沒有考慮相容ipad，也就沒想那麼多，還是使用flexible.js。相信使用過它的人都知道，有個東西叫做px2rem，很方便我們直接對著設計稿寫px的程式碼（假使設計稿是750px的），我們只需要在vue-cli生成的專案資料夾build裡增加如下配置：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

  當然別忘了main.js裡增加 ：import ‘lib-flexible’
  這樣我們寫的px的程式碼，webpack會自動幫我們去轉成rem的形式以做到適配各個移動裝置，但是問題來了，我們在使用Muse-ui或者Mint-ui的時候樣式會變的很小，看著非常彆扭，這個地方糾結了很久，為什麼沒有做的想象中的自適應？
  原因是我們之前配置的px2rem也會把我們引入的ui元件也轉換成rem的格式，本身元件已經是為移動端做了適配，px2rem又轉成了rem就導致其樣式變的很小，解決辦法就是我們還是使用flexible.js（中間有放棄使用的想法，想直接寫個rem.js去動態查詢然後設定font-size，單位也就全使用手寫的rem，不過還是打消了這個念頭），然後不使用px2rem，也就是不要上面的配置

// px2remLoader暫時不用
function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

  可能有人會問那這個時候flexible.js還有什麼作用呢？答案是我們在需要轉rem的地方手動寫rem,這樣引入的ui元件樣式就不會變小，而是很美觀了。我用的IDE是VScode，設計稿750的話，如果每個需要適配的單位都去計算rem是很麻煩的，推薦px to rem這個外掛，然後將16設定為75（設計稿為750px）

  這個時候我們直接寫px，選中後alt+z就直接轉換為rem了，這也算專案剛開始遇到的一個小坑吧。