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