vue-cli3创建项目实现px2rem
2023-09-27 14:24:28 时间
1、安装
npm install postcss-plugin-px2rem --save-dev
2、引入配置
// vue.config.js
const px2rem = require("postcss-plugin-px2rem");
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
px2rem({ // postcss-plugin-px2rem 默认配置
rootValue: 37.5, // 默认100
unitPrecision: 5,
propWhiteList: [],
propBlackList: [],
exclude: false,
selectorBlackList: [],
ignoreIdentifier: false,
replace: true,
mediaQuery: false,
minPixelValue: 0
})
]
}
}
}
};
3、修改index.html
// 原内容
<meta name="viewport" content="width=device-width,initial-scale=1.0">
// 修改为
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
4、看效果
#app {
text-align: center;
font-size: 30px;
}
相关文章
- vue - src for components || router(index.js)
- vue-iview-admin项目过大导致打包失败
- Vue - 实现微信扫码登录功能(项目植入微信扫码登录功能)超详细完整流程详解及详细代码及注释,附带完整功能源码、常见问题解决方案
- Vue项目--FLoor组件的实现
- vue项目如何监听窗口变化,达到页面自适应?
- vue项目中使用CDN引入
- vue项目防御XSS
- vue-cli创建自定义项目
- vue跨域,生产环境和线上环境
- 如何在Vue项目中使用vw实现移动端适配(转)
- Vue 项目本地 Mock 数据
- Vue 项目如何实现一个全局菜单搜索框
- [Vue warn]: Failed to mount component: template or render function not defined.解决方案
- vue实战入门进阶篇六:vue+elementui实现网站后台-新闻资讯界面实现
- 【vue笔记记录】
- vue项目之目录
- 在Vue项目中引用vant
- vue 多项目部署---二级目录
- 基于vue-cli构建vue-router的入门级demo
- vue项目集成mock.js
- Electron-vue实战-每日清单---03功能介绍与环境搭建
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- Vue项目部署后,刷新提示404
- vue-element-admin 项目引入Echarts中的dataTool; echarts.dataTool.prepareBoxplotData is not a function
- webstorm 调试 vue 项目
- vue-cli配置多入口多出口,实现一个项目两个访问地址,区分不同上线环境
- vue-cli构建项目 npm run build后应该怎么运行在本地查看效果