vue项目中，flexable.js结合muse-ui框架存在的问题

一、前言

这是在6月份找到工作以来的第一篇博客，前段时间每天都闲的发慌，每天就是接一下小需求然后一天完成，完成后就混几天，有种混吃等死的生活体验，可能这就是应届毕业生都会面临的问题。过来好几个月，终于迎来了春天，小组的老大准备带我参加一个系统的开发，这让我感到很兴奋，毕竟不想一直做个切图仔。

二、正言

项目是给公司旗下的代理商使用的一款移动端的管理系统，本身系统是存在的，不过是比较老的系统了，而且并没有做到前后端分离，个人觉得这样的系统在维护起来会比较麻烦，前端代码跟后端代码混在一起，看的我是头皮发麻。在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这种像素单位，可以再不同的手机上缩放，不会因为不用手机像素的不同使得样式乱掉，也省去了写多几套样式的时间，一套要是顶几套。

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