vue項目中，flexable.js結合muse-ui框架存在的問題

1、前言

這是在6月份找到工做以來的第一篇博客，前段時間天天都閒的發慌，天天就是接一下小需求而後一天完成，完成後就混幾天，有種混吃等死的生活體驗，可能這就是應屆畢業生都會面臨的問題。過來好幾個月，終於迎來了春天，小組的老大準備帶我參加一個系統的開發，這讓我感到很興奮，畢竟不想一直作個切圖仔。

2、正言

項目是給公司旗下的代理商使用的一款移動端的管理系統，自己系統是存在的，不過是比較老的系統了，並且並無作到先後端分離，我的以爲這樣的系統在維護起來會比較麻煩，前端代碼跟後端代碼混在一塊兒，看的我是頭皮發麻。在vue框架獲得普遍的普及和使用以後，固然咱們也選用了這個框架，因爲是作移動端，爲了節省時間，固然咱們不可能去寫好幾套樣式，因此一開始選用了flexable框架。

1.flexable.js

這是阿里淘寶的前端庫，作到了極好的自適應，全部的px都會幫你轉化成rem。這樣省去了大量的工做。

(1)安裝插件

　　npm install lib-flexible --save

（2）在confing文件夾下面的util.js裏面加入

var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,//設計稿除以10獲得的值
    }
}

//在下面的函數中修改着一句
function generateLoaders(loader, loaderOptions) {
 
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

（3）在main.js裏面的頭部中引入js import "lib-flexible"

（4）在index.html的頭部中指定meta類型<meta name="viewport" content="width=device-width, initial-scale=1.0">

這樣子基本就可以實現自適應了。

針對與flexable.js的效果我有話要講一下，就是在轉化的爲rem事後，界面看起來的會比設計稿的小。一樣是200px的div，轉成rem後會比原來就是200px的看起來要小。第二就是註解，若是某個元素不想轉化爲rem，那麼就能夠在對應的CSS屬性後面加上/*no */，就能夠了，好比border:1px solid #000; /*no */  ；一樣的咱們可使用/*px*/，這個經常使用於字體大小，能夠生成三套不一樣的像素大小。

2.muse-ui

同時咱們使用谷歌的muse-ui這個前端框架，我的以爲很好看，也用來寫過移動端的聊天室界面，感受仍是挺好的,貼個鏈接。去muse-ui。若是要使用這個框架的話上面也有教程。

（1）安裝

npm install muse-ui -S

（2）使用

引入的方式有兩種，一種是全局引入，第二種是按需引入

完整引入的方式
import Vue from 'vue';
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';

Vue.use(MuseUI);

new Vue({
  el: '#app',
  render (h) {
    return h('mu-button', {}, 'Hello World');
  }
});

　　按需引入的話首先須要下載插件

藉助 babel-plugin-import, 咱們能夠只引入須要的組件，以達到減少項目體積的目的。 首先，安裝 babel-plugin-import, less-loader:

npm i babel-plugin-import less less-loader -D

而後，將 .babelrc 修改成：

{
  "plugins": [
    ["import", {
      "libraryName": "muse-ui",
      "libraryDirectory": "lib",
      "camel2DashComponentName": false
    }]
  ]
}

 在mian.js裏面添加你想要使用組件

import Vue from 'vue';
import 'muse-ui/lib/styles/base.less';
import { Button, Select } from 'muse-ui';
import 'muse-ui/lib/styles/theme.less';

Vue.use(Button);
Vue.use(Select);

import Vue from 'vue';
import 'muse-ui/lib/styles/base.less';
import { Button, Select } from 'muse-ui';
import 'muse-ui/lib/styles/theme.less';

Vue.use(Button);
Vue.use(Select);

 3. 存在的問題

muse-ui自己做爲一款適配移動端的UI框架，自己是作了自適應的，在引入flexible.js 後。強行轉化框架的像素，致使組件變形，樣式發生改變，變得很醜，最好的辦法就是不使用flexible.js。而是經過腳原本控制。

 

<script>
      (function(doc, win) {
        var docEl = doc.documentElement,
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 640) {
              docEl.style.fontSize = "100px";
            } else {
              docEl.style.fontSize = 100 * (clientWidth / 640) + "px";
            }
          };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>

 

 相似的代碼在網上不少。本身百度一下也有一堆。經過rem這種像素單位，能夠再不一樣的手機上縮放，不會由於不用手機像素的不一樣使得樣式亂掉，也省去了寫多幾套樣式的時間，一套要是頂幾套。

前端道路長且阻，遇坑則填！