Web APP构建

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

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

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

第二步,安装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.

你可能感兴趣的:(Web APP构建)