基于vue-cli3的vue项目 通过postcss-pxtorem 实现px自动转换成rem
使用postcss-pxtorem 项目中的px转换为rem，rem单位用于适配不同宽度的屏幕。
如何在vue-cli3.0中使用postcss-pxtorem 插件
1 安装依赖包
npm install lib-flexible --save
npm install postcss-pxtorem --save-dev
2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import "lib-flexible/flexible.js";
3, 配置postcss-pxtorem
vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中（新构建的项目可能会找不到，需要手动在项目根目录创建vue.config.js）。
具体配置方法如下：
module.exports = {css: {loaderOptions: {postcss: {plugins: [// 把px单位换算成rem单位require("postcss-pxtorem")({rootValue: 75, // 换算的基数 (为了便于开发，根据设计图来定这个值，如果设计图给的宽度是750，通常就会把remUnit设置为75，这样就可以按照UI图1:1进行开发)selectorBlackList: [".van"],// 要忽略的选择器并保留为px。propList: ["*"], //可以从px更改为rem的属性。minPixelValue: 2 // 设置要替换的最小像素值。})]}}}
}
基于vue-cli3的vue项目 通过postcss-pxtorem 实现px自动转换成rem相关推荐
- Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
- Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
- vue Cli3与vue Cli2的改变
vue Cli3与vue Cli2的区别 常用命令 官方文档 创建文件 启动项目 目录结构 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 常用命令 vue -V 查看本地 vue ...
- vue项目全局把px转换成rem
vue项目全局把px转换成rem 首先vscode要有px to rem插件 1.vue.config.js 在vue.config.js中配置 css: {...// css预设器配置loaderO ...
- Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案
老文章了,目前用el-input v-model.number就能解决 很简单的操作,不知道当初在做什么,下文请直接忽略- Vue.JS项目中v-model导致输入框中number类型值自动转换成st ...
- vue中将px单位转成rem
方法一: px2rem-loader + lbi-felix(这种方法可能会导致第三方UI库样式缩小): 1.首先安装需要用到的包 npm install px2rem px2rem-loader l ...
- Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）
本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的 省略创建项目这个步骤,接下来在创建好的项目里找到public文件夹,复制多个index.html入口文件,并且修改名称: 每个入 ...
- 前端技术栈：将微信小程序代码自动转换成 Vue 代码
前段时间做了一个微信小程序,使用了云开发,但是云开发对业务逻辑的限制实在是太多了,因此想将其重构成 uni-app.最近将 wxml 改成 Vue 实在让人头大,因此"偷懒"使用 ...
- webpack转内联px为rem_Vuejs项目配置webpack将px自动转化为rem，适配移动端
本项目采用 iPhone 6 物理像素为 750px * 1334px 的设计稿 rem兼容性 先看看rem的兼容性,关于移动端 ios:6.1系统以上都支持 android:2.1系统以上都支持 大 ...
最新文章
- 因融资失败，应用崩溃，3 名程序员被“祭天”！
- gorm一对一 一对多 多对多查询案例
- ajaxfileupload带参数上传文件
- springboot对象方式注入
- 【C语言进阶深度学习记录】三十一 数组作为函数参数时退化为指针
- Win10系列：JavaScript动画3
- ubuntu10.04 NFS服务
- 在 Mac 上用输入法如何以另一种语言键入？
- .net微信公众号开发——群发消息
- verilog赋多位值_verilog语句两个always块对同一个变量赋值问题！【恢复】
- 关于平面束方程的理解
- CSP 202009-4 星际旅行
- 携程2019校园秋招后台开发笔试题（Java）
- oracle导出dmp文件合集
- 网络第三方投票工具搭建的代码应该怎么写？
- 开放性：你可能没听说过的终极大挑战（开放性既是驱动探索智能的力量之一，也可能直接就是AI本身的组成部分）
- 【转】PCL室内三维重建
- python常见算法（chatgpt算法实现）
- linux_Flatpak
- 中国下一个十年的大趋势