vue自適應布局

安裝lib和px2rem之后在build的utils中配置即可
先使用vue腳手架初始化一個webpack項目
vue init webpack 項目名
項目初始化好了之后，進入項目目錄中 (cd 項目名) 安裝 lib-flexible 和 px2rem-loader
npm i lib-flexible -S
npm i px2rem-loader -D
安裝好了之后還需要在項目的入口文件 main.js 里引入 lib-flexible
// main.js
import 'lib-flexible'

但是在實際開發中，我們通過設計稿得到的單位是px，所以要將px轉換成rem再進行樣式中。但如果都需要手動轉的話，就很麻煩，所以需要一個工具替我們完成這項工作，這個時候就需要配置px2rem了，當然，編輯器可能也要對應的插件。

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他樣式文件 loader 最終是都是由 build/utils.js 里的一個方法生成的。我們只需在 cssLoader 后再加上一個 px2remLoader 即可，px2rem-loader 的 remUnit 選項意思是 1rem=多少像素，結合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設置成設計稿寬度的 1/10，這里我們假設設計稿寬為 1920px。

//utils.js

const cssLoader = {
  loader: 'css-loader',
   options: {
     sourceMap: options.sourceMap
   }
 }

 const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
     remUnit: 192
   }
 }
 //...

放進loaders數組中
//utils.js

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
       })
     })
   }
//...