vue-cli 配置flexible

冰揚發表於2017-11-06
VueFlex

基於vue-cli配置手淘的lib-flexible + rem，實現移動端自適應

沒接觸過flexible的建議先看看大漠的這篇文章這樣你才會知道長度為什麼用rem，而字型要用px

  • 安裝flexible

    npm install lib-flexible --save

  • 引入flexible

在專案入口檔案main.js中新增如下程式碼，引入flexible

import 'lib-flexible'

  • px 轉 rem

使用 webpack 的 px2rem-loader,自動將px轉換為rem

  • 安裝px2rem-loader

npm install px2rem-loader --save-dev

  • 配置px2rem-loader

在vue-cli生成的檔案中,找到以下檔案 build/utils.js,如下圖新增配置

配置px2remLoader

關於importLoaders：如若有疑問，請參考webpack深入與實戰4-4
2017.12.8更新說明：是否需要配置importLoaders，可參考最底部的說明。

放入loaders陣列

  • px2rem 用法

安裝px2rem後，再使用px上有些不同，大家可以參考px2rem官方介紹，下面簡單介紹一下。

直接寫px，編譯後會直接轉化成rem ---- 除開下面兩種情況，其他長度用這個
在px後面新增/*no*/，不會轉化px，會原樣輸出。 --- 一般border需用這個
在px後面新增/*px*/,會根據dpr的不同，生成三套程式碼。---- 一般字型需用這個

示例程式碼
編譯前（自己寫的程式碼）

.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}

編譯後（打包後的程式碼）

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

  • 重啟專案，就可以愉快的用設計稿上的px了。

注意：坑

  • 不能在index.html的頭部加 name 為 viewport 的 meta 標籤，flexible會自動為我們新增！

更新：對外部引入css，px2rem能不能轉換rem問題

2017.12.8更新：在實際運用中發現對於外部引入的css檔案，有時候px2rem能正常轉換，有時候又不能轉換，到底是什麼原因呢？試驗了三種不同的css引入情況，發現第一種能正常轉換，二三不能正常轉換，至於原因，由於才疏學淺，還是不懂，求大神解答三種引入方式的區別。

如果明白了這些方法，就沒必要再配置cssLoader的importLoaders了，因為下面的方法更容易控制外部引入的css是否需要轉rem，而更改importLoaders就控制不了了，它會強制轉換。

<style src='../assets/style.css'>
 /* px2rem能正常轉換 */
</style>
<style>
  /* px2rem不能正常轉換 */
  @import '../assets/style.css';
</style>
<style>
  /* px2rem不能正常轉換 */
  @import url('../assets/style.css');

</style>

相關文章