vue-cli4以上的版本使用lib-flexible和px2rem

最新推荐文章于 2023-06-19 09:49:55 发布

grace姐姐

最新推荐文章于 2023-06-19 09:49:55 发布

阅读量505

点赞数

分类专栏： vue-cli lib-flexible 文章标签： vue css

本文链接：https://blog.youkuaiyun.com/lulusGirl/article/details/115404879

版权

vue-cli 同时被 2 个专栏收录

3 篇文章

订阅专栏

lib-flexible

1 篇文章

订阅专栏

1. 先安装lib-flexible

npm install lib-flexible

安装完在main.js 引入

import 'lib-flexible'

2.安装px2rem，安装这个之后，写样式按照psd图上，量多少px就写多少px，会自动转换成rem

npm install postcss-px2rem

3.安装完成之后能看到对应的版本信息，或者在项目的package.json中也能看到对应的版本

下面的px2rem-loader是之前按照别的教程安装的，之前没有安装 postcss-px2rem而是安装了px2rem-loader，但是一直报错

4.增加vue.config.js文件

module.exports = {
    css: {
          sourceMap:true,
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿350为例， 350 / 10 = 35
                        remUnit: 35
                    }),
                ]
            }
        },
        modules:true
    }
}

根据设计稿修改remUnit的值

5.修改flexible.js和index.html的内容

flexible.js在node-modules的lib-flexible中，

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

我这里是把540改成了750；

再修改public的index.html文件，删除<meta viewport/>标签，否则将根据已有的meta标签来设置缩放比例

重新运行项目即可，我当前的版本是@vue/cli 4.3.1