Vue.js 是現代且非常流行的 JavaScript 框架，我們可以使用它來快速構建高性能的 Web 應用程序。在使用 Vue.js 開發 Web 應用程序時，您可能需要在組件中添加一些 CSS 樣式以呈現更好的用戶界面。為了使代碼可讀性更好并且易于維護，建議將 CSS 樣式分離為單獨的文件。

在Vue.js 中，CSS 樣式可以通過獨立的樣式表文件來實現。與普通的 HTML 頁面一樣，引用樣式文件的方式也是相同的，可以使用 link 標簽將樣式文件引入到應用程序中：

<link rel="stylesheet" href="style.css">

在 Vue.js 中使用 CSS 樣式文件時，需要將樣式文件放置在與組件文件相同的目錄下，并使用 require 關鍵字加載文件：

<style scoped>
@import url('./style.css')
</style>

通過添加 scoped 屬性，可以使樣式僅應用于當前組件中的元素。這對于避免跨組件樣式污染非常有用。

在樣式文件中，我們可以使用基本 CSS 語法來定義樣式。例如，我們可以使用類名、ID 和標簽選擇器來應用樣式：

.my-class {
color: red;
}
#my-id {
font-size: 16px;
}
p {
text-align: center;
}

總之，在 Vue.js 中使用 CSS 樣式文件是一種非常有效的方法，可以幫助您使代碼更易于維護，并使樣式更具可讀性。請記住，在使用 scoped 屬性時，樣式僅適用于當前組件中的元素，這樣可以避免跨組件樣式污染。