Vue2移动端使用felxbilejs自适应

安装:

图片[1]-Vue2移动端使用felxbilejs自适应-小栋博客

自动转换px

"postcss-px2rem": "^0.3.0",

felxbile

"lib-flexible": "^0.3.2",

项目配置文件:

{
    "name": "XiaoDong",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    "dependencies": {
        "axios": "^1.3.2",
        "core-js": "^3.25.3",
        "less": "^3.0.4",
        "less-loader": "^5.0.0",
        "lib-flexible": "^0.3.2",
        "path": "^0.12.7",
        "pinia": "^2.0.32",
        "pinia-plugin-persist": "^1.0.0",
        "postcss-px2rem": "^0.3.0",
        "qrcode": "^1.5.1",
        "vant": "^2.12.53",
        "vue": "^2.7.0",
        "vue-canvas-poster": "^1.2.1",
        "vue-cookies": "^1.8.2",
        "vue-moment": "^4.1.0",
        "vue-router": "^3.2.0",
        "vuex": "^3.4.0"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.19",
        "@vue/cli-plugin-router": "~4.5.19",
        "@vue/cli-plugin-vuex": "~4.5.19",
        "@vue/cli-service": "~4.5.19",
        "babel-plugin-import": "^1.13.6",
        "prettier": "2.8.4",
        "vue-template-compiler": "^2.7.0"
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ]
}

配置:

在Vueconfig内的moudle下配置

publicPath: '/vote/',
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 37.5
                    })
                ]
            }
        }
    },

remUnit:是按照你的设计稿去填写需要使用UI框架X2即可!

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容