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这种像素单位，能够再不一样的手机上缩放，不会由于不用手机像素的不一样使得样式乱掉，也省去了写多几套样式的时间，一套要是顶几套。

前端道路长且阻，遇坑则填！