在使用vue開發的過程中，我們經常需要修改rem的大小，以使得頁面能夠適應不同的屏幕尺寸。本文將介紹如何在vue中修改rem的大小，并給出具體的代碼實現。

首先，我們需要在項目根目錄下的index.html文件中添加以下代碼：

<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
window.addEventListener('resize', function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
}, false);
</script>

這段代碼會根據瀏覽器窗口的寬度自動計算出應該使用的rem的大小，并在窗口大小改變時動態修改rem的大小。其中，我們將瀏覽器窗口的寬度除以10得到一個rem的大小。

接著，我們需要在項目中的scss文件中定義基礎的樣式：

$rem: 1rem;
@mixin font-size($size) {
font-size: $size * $rem;
}
h1 {
@include font-size(2);
}

在這段代碼中，我們首先定義了一個基礎的rem大小，即1rem等于瀏覽器窗口寬度的十分之一。然后，我們定義了一個名為font-size的mixin，可以通過傳入不同的參數來實現不同大小的字體。在樣式中，我們將h1的字體大小設為2rem，這里的2將會被乘以基礎的rem大小。

最后，在vue組件中，我們可以直接使用定義好的樣式：

<template>
<div class="my-component">
<h1>Hello World!</h1>
</div>
</template>
<style lang="scss">
.my-component {
h1 {
@include font-size(2);
}
}
</style>

這里我們定義了一個名為my-component的組件，在組件中使用了定義好的樣式。在樣式中，我們通過選擇器來指定只有組件中的h1標簽會使用我們定義的字體大小。

通過以上步驟，我們可以在vue中方便地修改rem的大小，并且重復使用定義好的樣式。這可以大大提高我們項目的開發效率。