这是我公司项目,需求:使用vue-cli2.9+px2rem实现响应式布局
废话少说,直接上例子吧!
第一步:命令行安装 lib-flexible
npm install lib-flexible --save
第二步:在 项目main.js中导入
import 'lib-flexible'
第三步:在项目index.html中加入如下代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我用webstorm开发,脚手架生成的项目自带这行代码
第四步:命令行安装px2rem-loader
npm install px2rem-loader --save-dev
第五步:需要配置px2rem-loader
在项目build文件夹里,找到utils.js文件夹,把px2remLoader写入
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoa