在Vue中，我們可以通過以下幾種方式來分離CSS：

1.使用單文件組件

<template>
<div class="my-component">
<p>這是一個單文件組件</p>
</div>
</template>
<style scoped>
.my-component p {
color: red;
}
</style>

在上面的代碼中，我們可以看到，樣式被寫在單文件組件的<style>標簽中，并且使用了scoped屬性。這個屬性的作用是限制這些樣式只在當前組件內部生效，并且自動生成一個類名，防止組件之間的樣式污染。

2.使用CSS Modules

CSS Modules是一種可以將CSS作為模塊引入的技術，使得每個模塊的樣式互不干擾。在Vue中，我們可以使用以下代碼來啟用CSS Modules：

<template>
<div class="my-component">
<p class="text">這是一個CSS Modules組件</p>
</div>
</template>
<style module>
.text {
color: red;
}
</style>

在上面的代碼中，我們可以看到，style標簽上有module屬性，代表這個組件使用了CSS Modules。在類名前加上$符號，則可以訪問該類名的局部變量。例如，在JS中我們可以像這樣引入：

import styles from './my-component.vue'
console.log(styles.text) // "my-component_text_1q3je"

3.使用CSS預處理器

Vue支持使用Sass、Less、Stylus等CSS預處理器。我們只需要在項目中安裝對應的預處理器，并且在項目中配置相關的loader即可。例如，如果要使用Sass，我們可以在項目中安裝sass-loader和node-sass，并且在webpack.config.js中添加以下代碼：

module.exports = {
module: {
rules: [
{
test: /\.sass$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}

有了以上幾種分離CSS的方式，我們就可以更加方便地管理我們的樣式，并且讓組件之間不相互干擾，提高了代碼的可維護性。