Vue是一個非常流行的前端框架，它允許我們通過模板和JavaScript來構建用戶界面。除此之外，Vue還可以讓我們使用CSS來控制HTML元素的樣式。Vue中的CSS可以在以下三個位置進行編寫：

方式一：內聯樣式

<template>
<div style="background-color: red;">Hello world!</div>
</template>

內聯樣式是最簡單的一種CSS寫法。它是在HTML標簽上使用style屬性，來定義該標簽的樣式。這種寫法適用于僅需要在少量標簽上應用樣式的情況。但對于大型項目而言，內聯樣式可能會讓代碼變得難以維護。

方式二：利用單文件組件（SFC）中的<style>標簽

<template>
<div class="hello">Hello world!</div>
</template>
<style>
.hello {
background-color: red;
}
</style>

單文件組件（SFC）是一種Vue文件組織形式，它將所有組件相關的代碼都放在同一個文件中。SFC允許我們在Vue組件中使用<style>標簽，來定義該組件的樣式。這種寫法可以使CSS與HTML分離，使樣式代碼更易于維護和調試。

方式三：使用外部CSS文件

// App.vue
<template>
<div class="hello">Hello world!</div>
</template>
<script>
import "./styles.css";
export default {
name: "App",
};
</script>

/* styles.css */
.hello {
background-color: red;
}

外部CSS文件是一種將CSS代碼放置在獨立文件中的方法。我們可以在Vue組件中通過import語句來導入一個外部CSS文件。這種寫法可以使CSS代碼更容易維護，因為CSS代碼可以集中到一個或多個CSS文件中，而不是分散在HTML中。

總體來說，Vue中的CSS可以使用上述三種方式進行編寫。具體使用哪一種方式，取決于項目的規模、需求以及團隊的開發規范。無論采用哪種方式，我們都應該注重CSS代碼的可維護性和可讀性，以避免CSS代碼失控。