vue-cli 配置flexible

caoym 發布于2019-08-21 17:28 / 1661人閱讀

摘要：一般需用這個在后面添加會根據的不同，生成三套代碼。如果明白了這些方法，就沒必要再配置的了，因為下面的方法更容易控制外部引入的是否需要轉，而更改就控制不了了，它會強制轉換。能正常轉換不能正常轉換不能正常轉換

基于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,如下圖添加配置

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

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 #ffffd; /*no*/
}

編譯后（打包后的代碼）

.selector {
    width: 2rem;
    border: 1px solid #ffffd;
}
[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就控制不了了，它會強制轉換。

云服務器 GPU云服務器 flexible vue-cli vue-cli3 spring配置數據源配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89560.html

webpack手動構建vue和vue-cli構建使用 px2rem-loader ,全局自動轉換px

摘要：做移動端時，適配是必須的。使用單位，可在不同屏幕上完美顯示相同的布局。文件首先要把轉成正常的，在交給來做，所以是外還需要加上一個設計稿寬度表示轉換過程小數保留幾位。安裝配置結束后，重啟項目。會發現自己設置的被轉為了。做移動端時，適配是必須的。使用rem單位，可在不同屏幕上完美顯示相同的布局。px2rem 插件方便的將px單位轉為了rem。 1. 自己手動構建vue webpck配置...

AWang 2019-08-30 14:16 評論0 收藏0
說說vue-cli中使用flexible和px2rem-loader

摘要：下載或在項目中引入一般情況在中引入設置標簽視情況而定安裝或在中配置，在項目文件中找到，將添加到中，，下的根據設計稿而定具體如下編譯新加由于設計稿是添加到里面省略項目中使用假設設計稿和分別是，具體代碼 1.下載lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在項目中引入lib-flexible 一般情況在...

Heier 2019-08-23 15:31 評論0 收藏0
vue和vue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案：這里...

CodeSheep 2019-08-22 16:42 評論0 收藏0
vue和vue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案：這里...

monw3c 2019-08-29 15:09 評論0 收藏0
vue和vue-cli構建使用 px2rem-loader ,全局自動轉換px單位,完美解決引入第三

摘要：使用的小伙伴兒會用到淘寶的開源的適配方案去輕松的完成適配，這也是我最喜歡的，但是使用這個方案時，你引入第三方庫時樣式會變小。。這個坑難的我不行，各種百度，各種想法，差一點就放棄了這個方案。最近公司的的項目趕，作為前端的小白懶出新的高度，使出專業的技能 --復制粘貼！！（改別人的代碼也是煎熬）我經常做一些H5頁面，這樣就會遇到適配這個頭疼的問題，我分享下我用經常用到的適配方案：這里...

loostudy 2019-08-02 10:16 評論0 收藏0