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

由於公司有個項目有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 ）

// 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了，這也算項目剛開始遇到的一個小坑吧

轉自：http://blog.csdn.net/zhanglong_web/article/details/78649717
http://blog.csdn.net/Coding_Jia/article/details/78866220