Vue 是一款流行的前端框架，您可以很方便的使用它來構建復雜的用戶界面。在常見的應用場景中，我們可能需要在Vue項目中引入外部 CSS 文件以美化頁面。在這篇文章中，我們將學習如何在 Vue 中外部引入 CSS。

對于簡單的 Vue 項目，我們可以直接將 CSS 文件添加到項目的 HTML 中，讓瀏覽器自動引入。但是，對于較大的項目或多個組件存在的情況，我們需要更好的方式進行 CSS 管理。我們可以使用 require 或 import 語句來處理這些問題。

// 使用 require 引入外部 CSS 文件
require('./path/to/style.css')
// 使用 import 引入外部 CSS 文件
import './path/to/style.css';

使用這些方法，在您的 Vue 項目中我們可以更好的管理 CSS 文件。您可以創建一個單獨的 CSS 文件，并使用上述方法將其引入到組件中。例如：

// 引入單獨的 CSS 文件
require('@/assets/styles/my-style.css')
// 在組件中引入 CSS
<template>
<div class="my-div">
<h1>歡迎來到我的網站！</h1>
<p>這里是我的博客文章列表。</p>
</div>
</template>
<style>
/* 在這里使用 CSS 樣式 */
.my-div {
background-color: #eee;
padding: 20px;
}
</style>

請注意，當您使用 require/import 語句引入 CSS 文件時，您需要確保使用了處理 CSS 文件的 loader。例如，在 Vue CLI 2.x 中使用的默認 loader 是 css-loader 和 style-loader。在 Vue CLI 3.x 中默認使用的是 vue-loader 和 style-loader。

總之，在 Vue 項目中引入外部 CSS 文件非常簡單。您可以使用 require/import 語句將文件引入到組件中，并使用 CSS 樣式美化您的界面。使用這種方式，您可以更好的管理 CSS 文件，并使您的項目代碼更加清晰易懂。