BAT前端面试都问啥!Vue常见热点问题&解决方案

一.解决Vue刷新页面后store数据丢失的问题

原来的状态(页面刷新数据会重置)

BAT前端面试都问啥!Vue常见热点问题&解决方案

 

解决后(页面刷新保留store数据)

 

BAT前端面试都问啥!Vue常见热点问题&解决方案

二.Vue项目中自动将px转换为rem

1.配置与安装步骤:

a.在 Vue 项目的 src 文件夹下创建一个 config 文件夹:

b.在 cnfig 文件夹中创建 rem.js:

BAT前端面试都问啥!Vue常见热点问题&解决方案

c.将以下代码复制到 rem.js 中:

BAT前端面试都问啥!Vue常见热点问题&解决方案

d.在 src 文件夹下的 main.js 中引入:

BAT前端面试都问啥!Vue常见热点问题&解决方案

e.在 Vue 项目根目录终端引入:

BAT前端面试都问啥!Vue常见热点问题&解决方案

f.在 Vue 项目文件夹下的 postcss.config.js 中加入:

BAT前端面试都问啥!Vue常见热点问题&解决方案

2.实例演示

假如给出设计图是 375*812,可以在代码中直接写入:

BAT前端面试都问啥!Vue常见热点问题&解决方案

此时在页面中显示:

BAT前端面试都问啥!Vue常见热点问题&解决方案

如果要让部分属性不转换成 rem,可以将 px 写成 Px:

BAT前端面试都问啥!Vue常见热点问题&解决方案

这时在页面中就会保留 375px 了:

BAT前端面试都问啥!Vue常见热点问题&解决方案