记录自己在写页面过程中遇到的问题，也算是记录自己的成长。

一个基于vue的Web APP ，在此过程中面临的第一个问题就是如何适配移动端。

第一步，在index.html文件中加入手机端的适配的meta的代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

第二步，安装lib-flexible模块，命令 npm install lib-flexible --save, 并在main.js中引入 import 'lib-flexible'. 

lib-flexible: 一个弹性布局方案，在引入lib-flexible后，会自动为设置html的font-size我i屏幕宽度除以10，将px转换成rem单位（1rem等于html根节点的font-size），一般而言，lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案。

第三步，安装px2rem-loader，命令 npm install px2rem-loader --save，而配置px2rem分两种情况：

    1、vue-cli 2.x

    2、vue-cli 3.x

在此只对vue-cli 2.x

在build/utils.js修改

重启服务 npm run dev.