Vue2移动端使用felxbilejs自适应

安装:

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即可!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
技术教程

Nuxt3.js移动端Pc端自适应解决方案:使用flexible.js和postcss-pxtorem实现傻瓜式Px转Rem

2023-5-17 20:23:22

技术教程

解决Nuxt3项目创建项目失败链接失败等问题

2023-6-20 11:34:59

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索