vux+vue+lib-flexible配合vue项目使用

废人Lhpi
1,328 阅读2分钟

开始的一大段话

  1. 在使用前端组件，vux或者mintUI等UI框架有要使用lib-flexible.这种情况应该怎么做呢？
  2. flexible在编译之后会改变组件的大小，这样相当于没有使用到组件。
  3. 使用组件就是为了方便！

开始使用

  1. 因为公司决定迅速开发手机端的页面，技术选择就是vue+vuxUI框架。开始摄像做到手机端兼容的同时结合ui框架让项目更好看些，然后就开始动手做！
  2. 这个时候需要说下flexible.js，阿里开源的移动端适配代码，很好用，但是vux组件会变小。
  3. 相信使用过它的人都知道，有个东西叫做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. 在main.js里增加 ：import ‘lib-flexible’
  2. 这样我们写的px的代码，webpack会自动帮我们去转成rem的形式以做到适配各个移动设备，但是问题来了，我们在使用vux的时候样式会变的很小，看着非常别扭，这个地方纠结了很久，为什么没有做的想象中的自适应？
  3. 原因是我们之前配置的px2rem也会把我们引入的ui组件也转换成rem的格式，本身组件已经是为移动端做了适配，px2rem又转成了rem就导致其样式变的很小，解决办法就是我们还是使用flexible.js（中间有放弃使用的想法，想直接写个rem.js去动态查询然后设置font-size，单位也就全使用手写的rem，不过还是打消了这个念头），然后不使用px2rem，也就是不要上面的配置（注意注销上面添加的配置px2remLoader ）
// 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. 可能有人会问那这个时候flexible.js还有什么作用呢？答案是我们在需要转rem的地方手动写rem,这样引入的ui组件样式就不会变小，而是很美观了。我用的IDE是VScode，设计稿750的话，如果每个需要适配的单位都去计算rem是很麻烦的，推荐px to rem这个插件，然后将16设置为75（设计稿为750px）
  2. 这个时候我们直接写px，选中后alt+z就直接转换为rem了
avatar
文章
阅读
粉丝