vue+amfe-flexible(手淘移動端適配方案)開發移動端

1.移動端適配所需依賴

cnpm install amfe-flexible -S
cnpm install postcss-pxtorem -S
複製代碼

2.main.js配置

//引入
import 'amfe-flexible/index'
複製代碼

3.vue.config.js

注意: vue-cli3.x默認是沒有vue.config.js配置文件的,須要手動建立,位置在項目根目錄

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px單位換算成rem單位
                        rootValue: 75, // 換算的基數(設計圖750的根字體爲75,若是設計圖爲640:則rootValue=64)
                        propList: ['*']
                    })
                ]
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 爲生產環境修改配置...
        } else {
            // 爲開發環境修改配置...
        }
    }
}
複製代碼

4.使用

在CSS樣式中可直接書寫750PX,既表明 整屏的寬度,若是設計圖不是750的,可在vue.config.js中 rootValue屬性,修改成設計圖寬度便可,詳見vue.config.js註釋說明