基于vue-cli配置移动端自适应

目前移动端应该大都是用rem来做自适应布局,下面是关于如何基于vue-cli配置的项目做移动端屏幕适配。

1.安装lib-flexible

在命令行中输入并运行:npm i lib-flexible --save


2.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible'

这个时候我们可以npm run dev看一下,已经有了效果。


但是这不是我们最终想要的,到这一步意味着我们还是需要根据UI效果图将px转成rem,这样的计算实在是太繁琐,之前本人的做法是通过sass写一个方法将px转rem,这样一来我需要将每一个页面、组件都引入这个sass文件或者每一个页面、组件都加上这一个方法,问题是解决了但是不够优雅,好在网上的大神很多。在github上看到了https://github.com/songsiqi/px2rem-postcss

3.安装postcss-loader、postcss-px2rem

在命令行中输入并运行:npm install postcss-loader postcss-px2rem --save


注:我用的是cnpm是因为安装了淘宝镜像,没有安装淘宝镜像就是npm

4.修改项目build文件夹下的vue-loader.conf.js文件

在module.exports中加入postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]


因为是以750px的UI设计图为标准,所以remUnit的值为75。

修改了vue-loader.conf.js文件我们需要在终端重新输入并运行npm run dev

最终如图结果:



没有更多推荐了,返回首页