vue移动端flexible.js结合Muse-ui使用的小坑

因为公司有个项目有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
 })
 })
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

当然别忘了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暂时不用
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
 })
 })
 }
1
2
3
4
5
6
7
8
9
10
11

可能有人会问那这个时候flexible.js还有什么作用呢？答案是我们在需要转rem的地方手动写rem,这样引入的ui组件样式就不会变小，而是很美观了。我用的IDE是VScode，设计稿750的话，如果每个需要适配的单位都去计算rem是很麻烦的，推荐px to rem这个插件，然后将16设置为75（设计稿为750px）

这个时候我们直接写px，选中后alt+z就直接转换为rem了，这也算项目刚开始遇到的一个小坑吧。