使用rem可以讓我們在不同設備上保持一致的顯示效果，使得我們的網頁不會因為使用設備的不同，而采取不同的展示方式。Vue雖然不會直接支持rem，但我們可以通過一些方法來實現Vue+使用+rem。

首先，我們需要進行單位轉換，將px轉為rem。這個過程我們可以通過安裝exclamations/vue-svgicon這個依賴包，來方便地將px轉化為rem。安裝好之后，我們在代碼中可以將 px 換成 rpx ，rpx的值即為原值/100，這樣在不同屏幕尺寸下就可以保持一致。

<template>
<div class="box" :style="{fontSize: fontSize + 'rpx'}">
<h1 class="title">{{title}}</h1>
<p class="content">{{content}}</p>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
title: '這是標題',
content: '這是內容',
fontSize: 14
}
}
}
</script>
<style scoped>
.box {
width: 300px;
margin: 0 auto;
}
.title {
font-size: 30px;
}
.content {
font-size: 16px;
}
</style>

其次，我們需要對瀏覽器的viewport進行設置，這可以通過在main.js中進行配置來實現。這里我們使用了viewport-units-buggyfill插件來解決一些低版本瀏覽器不支持viewport的問題。配置如下：

import viewportUnitsBuggyfill from 'viewport-units-buggyfill';
import 'viewport-units-buggyfill/viewport-units-buggyfill.css';
viewportUnitsBuggyfill.init();
window.onresize = () =>{
viewportUnitsBuggyfill.refresh();
};

最后，我們還可以使用scss或者postcss來簡化單位轉換的過程，使得代碼更加的簡潔。這個過程我們可以通過使用postcss-pxtorem這個依賴包，來實現css單位的自動轉化。需要注意的是，我們需要對一些不需要轉化的地方進行處理，比如border、padding等屬性。配置如下：

// postcss.config.js
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 108, // 以750為某一屏幕下的倍數，1rem=108px (750/7.5)
unitPrecision: 5, // 小數位最多顯示5位
propList: ['*'],
selectorBlackList: ['.vant'], // 需要忽略的css類名，即vant組件中的class
replace: true,
mediaQuery: false,
minPixelValue: 12
})
]
};

以上就是Vue+使用+rem的詳細內容，如果您想要讓網頁的顯示效果更加地統一，我們可以通過以上方法來實現。