vue2.0+ 移动端 我所遇见的的一些问题（1）

因为移动端的项目大多需要按照ui设计的设计稿来做，单纯用vue移动端框架来写需要大面积改样式，那最好自己重新来写样式。

既然是移动端就需要做页面适配，我采用的是淘宝的适配插件lib-fleible，主要是编译成rem，这个插件网上有很多解释的，简单叙述下安装过程

1.安装

npm install lib-flexible –save

2.引入插件在 main.js

import 'lib-flexible/flexible'

3、安装px2rem，使得我们在开发中不需要自己手动计算，照常写px

npm install px2rem-loader --save-dev

在cssLoaders中增加

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

其中75位设计稿的1/10

最后在generateLoaders方法中输出

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader,px2remLoader]

4.安装之后的问题

对于考虑到字体文件自带的点阵尺寸，不希望出现15、13px这种奇数字号，字号依然使用px；如：font-size:28px;/*px*/

而不需要转化为rem的样式 如:border:1px solid #000;/*no*/ 后面加/*no*/就可以了

虽然这个插件比较好用，重启之后再运行项目，但是还有比较难搞的问题就是如果你使用了外部插件，外部插件很多事做过了适配，但引入进来之后还会被转化为rem

这样整个插件的样式都会被缩小一倍，对于这个问题我也没有很好的办法，仅从配置文件中好像并不可以改变，因为项目引入的样式并不算多，我就用蠢办法再重写一下引入的样式，其实并不是很多，主要是你需要找到插件的class样式，自己再重新增大一倍，注意样式的权重问题就好了