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 文件，并使您的项目代码更加清晰易懂。