Vue移動端用淘寶彈性布局lib-flexible插件做適配的方法

更新時間：2020年05月26日 11:08:48 作者：安靜、認真聽

這篇文章主要介紹了Vue移動端用淘寶彈性布局lib-flexible插件做適配的操作方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

淘寶彈性布局lib-flexible

lib-flexible并不單獨使用，而是搭配px2rem-loader一起做適配方案，目的是自動將css中的px轉(zhuǎn)換成rem，在項目中還是按照設(shè)計稿寫上對應的固定像素（px）就行。

移動端適配的具體步驟

第一步：安裝插件 lib-flexible

npm i lib-flexible --save-dev

第二步：安裝px2rem loader

npm install px2rem-loader --save-dev

第三步：在main.js中引入lib-flexible

import 'lib-flexible/flexible'

第四步：在build中的util.js文件中配置px2rem-loader

先找到build文件里面的utils.js文件，找到cssLoaders函數(shù)，把px2rem-loade（下面代碼）添加到函數(shù)中。

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
   remUnit: 75 // remUnit為轉(zhuǎn)換rem的基礎(chǔ) 設(shè)計稿單位/等分數(shù) = remUnit
  }
 }

然后再找到cssLoaders中的generateLoaders的函數(shù)，添加上px2rem-loader。

function generateLoaders (loader, loaderOptions) {
  
	const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

	 if (loader) {
	  loaders.push({
	   loader: loader + '-loader',
	   options: Object.assign({}, loaderOptions, {
	    sourceMap: options.sourceMap
	   })
	  })
	 }

在這里插入圖片描述