vue的爬坑之路（二）之-----vue-cli的移動端適配插件flexible

依賴

項目基礎配置使用 vue-cli 生成（可參考上一篇隨筆）

移動端自適應方案核心：阿里可伸縮布局方案 - lib-flexible

px 轉 rem：px2rem，它有 webpack 的 loader：px2rem-loader

開始

首先，我們使用 vue 的腳手架 vue-cli 來初始化一個 webpack 項目

沒有安裝過 vue-cli 的請先安裝 vue-cli

安裝所需依賴后安裝 lib-flexible 和 px2rem-loader

1.下載lib-flexible

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安裝px2rem-loader

npm install px2rem-loader

4.配置px2rem-loader

在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如：

  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }

    const postcssLoader = {
        loader: 'postcss-loader',
        options: {
           sourceMap: options.sourceMap
        }
    }

  const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } }

同時，在generateLoaders方法中添加px2remLoader

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

    if (options.extract) {
      　　return ExtractTextPlugin.extract({
        　　use: loaders,
        　　fallback: 'vue-style-loader'
      　　})
    　　} else {
      　　return ['vue-style-loader'].concat(loaders)
    　　}
  }

6.重啟

當配置完之后，一定要重啟下服務，這樣去調試台看的時候就會發現px自動轉化為rem了

npm run dev

7.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; }

轉載：http://www.cnblogs.com/xiaobaibubai/p/8528744.html