根據VANT官方説明,需要在項目中安裝兩個插件即可。
如果需要使用 rem 單位進行適配,推薦使用以下兩個工具:
postcss-pxtorem 是一款 PostCSS 插件,用於將 px 單位轉化為 rem 單位
lib-flexible 用於設置 rem 基準值
但是昨天在安裝使用的時候,出了問題。提示錯誤,打開項目頁面也是空白了。於是百度了下,發現網絡上的文章都是抄襲。基本沒有解決問題,經過一番折騰後發現是postcss這個插件的版本高了,目前如果不指定版本號安裝基本都是安裝的是6+以上版本。導致項目不能識別其標識錯誤!
需要指定其版本號進行安裝,如5.1.1
npm i postcss-pxtorem@5.1.1
接着安裝lib-flexible
安裝完成後,在main.js中引入
import "amfe-flexible"
然後在項目的根目錄下新建.postcssrc.js文件(網上很多人説在安裝完插件後會自動生成,但是我這裏沒有。)
然後在其中寫入:
module.exports = {
"plugins": {
"autoprefixer": {
"browsers": ["Android >= 4.0","iOS >= 8"]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
重啓服務,即可看到原本PX單位全部變成了rem單位了!
發現VUE安裝完插件依賴後,導致項目無法啓動或是啓動後空白。基本都是插件的版本過高引起的,注意下!