使用vue-cli如何設定行動端自適應？

本篇文章主要介紹了詳解基於vue-cli配置移動端自適應，現在分享給大家，也給大家做個參考

之前寫過一篇關於移動端屏幕適配：移動端螢幕適配的解決，今天來聊聊基於vue-cli配置的行動端螢幕適配問題。

配方還是一樣：手淘的lib-flexible rem

配置flexible

安裝lib-flexible

在命令列中執行如下安裝：

npm i lib-flexible --save

引入lib-flexible

在專案入口檔main.js 裡引入lib-flexible

// main.js
import 'lib-flexible'

新增meta 標籤

在專案根目錄的index.html 中加入如下meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

px 轉re​​m

#實際開發中，我們透過設計稿得到的值單位是px，所以要將px 轉換成rem 再寫進樣式中。

將px 轉換成rem 我們將使用px2rem 這個工具，它有webpack 的loader：px2rem-loader

安裝px2rem-loader

#在在命令列中執行以下安裝：

npm i px2rem-loade --save-dev

設定px2rem-loade

在vue-cli 產生的webpack 設定中，vue-loader 的options 和其他樣式檔案loader最終都是由build/utils.js 裡的一個方法產生的。

我們只要在cssLoader 後面再加上一個px2remLoader 即可，px2rem-loader 的remUnit 選項意思是1rem=多少像素，結合lib-flexible 的方案，我們將px2remLoader 的options.remUnit 設定成設計稿寬度的1/10，這裡我們假設設計稿寬為750px。

// utils.js
var cssLoader = {
 loader: 'css-loader',
 options: {
  minimize: process.env.NODE_ENV === 'production',
  sourceMap: options.sourceMap
 }
}
var px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 75
 }
}
// ...

並放進loaders 數組中

// utils.js
function generateLoaders(loader, loaderOptions) {
 var loaders = [cssLoader, px2remLoader]
 // ...

修改配置後需要重啟，然後我們在組件中寫單位直接寫px，設計稿量多少就可以寫多少了，舒服多了。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue中如何實作watch自動偵測資料變更

使用Parcel如何包裝

詳細解讀Vue如何設定打包工具

詳細解答vue的變化對元件有什麼影響？

使用JavaScript如何實作抽獎系統

以上是使用vue-cli如何設定行動端自適應？的詳細內容。更多資訊請關注PHP中文網其他相關文章！