vue-cli3.0 移動端px轉rem以及vue-cli3.0搭建等

網上說的較多的是postcss-pxtorem和postcss-px2rem(postcss-pxtorem配置項介紹https://segmentfault.com/a/11...
這裏我採用了postcss-pxtorem,我是用的yarn安裝,速度仍是比較快的,之前用npm有時候要等好久。
一、安裝依賴包css

yarn add lib-flexible --dev
yarn add postcss-pxtorem --dev

二、main.js中引入lib-flexiblevue

import "lib-flexible/flexible.js"

三、配置postcss-pxtoremvue-cli

vue-cli3 項目postcss-pxtorem的配置放在vue.config.js中(新構建的項目可能會找不到,須要手動在項目根目錄建立vue.config.js)
module.exports = {
 css: {
     loaderOptions: {
          postcss: {
            plugins: [
                 // 把px單位換算成rem單位
              require("postcss-pxtorem")({
                    rootValue: 75, // 換算的基數(設計圖750的根字體爲32)
                    selectorBlackList: [".van"],// 要忽略的選擇器並保留爲px。
                    propList: ["*"], //能夠從px更改成rem的屬性。
                    minPixelValue: 2 // 設置要替換的最小像素值。
                })
            ]
          }
     }
}

}
四、建立vue.config.jsnpm

在項目根目錄下新建vue.config.js文件與package.json同級
請參考https://blog.csdn.net/u014440483/article/details/87267160(我是看這篇文章的)

五、vue-cli3.0環境搭建(找了一篇文章,和我以前看着搭建的差很少,只是我用的是yarn,最後的npm run serve改成yarn serve就行了)
https://blog.csdn.net/qq_4185...json

相關文章
相關標籤/搜索