如何详细配置vue-cli以实现flexible布局？

本文共计708个文字，预计阅读时间需要3分钟。

基于vue-cli配置手淘的lib-flexible，实现移动端自适应的步骤如下：

1. 安装lib-flexible bash npm install lib-flexible --save

2. 引入lib-flexible 在项目入口文件main.js中添加以下代码： javascript import 'lib-flexible'

基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应

安装flexible

npm install lib-flexible --save

引入flexible

在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

安装px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

是否需要配置importLoaders，可参考最底部的说明。

px2rem 用法

安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。