vux+vue+lib-flexible配合vue項目使用

開始的一大段話

1. 在使用前端組件，vux或者mintUI等UI框架有要使用lib-flexible.這種狀況應該怎麼作呢？
2. flexible在編譯以後會改變組件的大小，這樣至關於沒有使用到組件。
3. 使用組件就是爲了方便！

開始使用

1. 由於公司決定迅速開發手機端的頁面，技術選擇就是vue+vuxUI框架。開始攝像作到手機端兼容的同時結合ui框架讓項目更好看些，而後就開始動手作！
2. 這個時候須要說下flexible.js，阿里開源的移動端適配代碼，很好用，可是vux組件會變小。
3. 相信使用過它的人都知道，有個東西叫作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
        })
      })
    }
複製代碼

4. 在main.js裏增長 ：import ‘lib-flexible’
5. 這樣咱們寫的px的代碼，webpack會自動幫咱們去轉成rem的形式以作到適配各個移動設備，可是問題來了，咱們在使用vux的時候樣式會變的很小，看着很是彆扭，這個地方糾結了好久，爲何沒有作的想象中的自適應？
6. 緣由是咱們以前配置的px2rem也會把咱們引入的ui組件也轉換成rem的格式，自己組件已是爲移動端作了適配，px2rem又轉成了rem就致使其樣式變的很小，解決辦法就是咱們仍是使用flexible.js（中間有放棄使用的想法，想直接寫個rem.js去動態查詢而後設置font-size，單位也就全使用手寫的rem，不過仍是打消了這個念頭），而後不使用px2rem，也就是不要上面的配置（注意註銷上面添加的配置px2remLoader ）

// 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
        })
      })
    }
複製代碼

7. 可能有人會問那這個時候flexible.js還有什麼做用呢？答案是咱們在須要轉rem的地方手動寫rem,這樣引入的ui組件樣式就不會變小，而是很美觀了。我用的IDE是VScode，設計稿750的話，若是每一個須要適配的單位都去計算rem是很麻煩的，推薦px to rem這個插件，而後將16設置爲75（設計稿爲750px）
8. 這個時候咱們直接寫px，選中後alt+z就直接轉換爲rem了