Vue 是一個流行的前端框架，它可以幫助開發者構建復雜的交互界面。在 Vue 開發中，我們常常需要引入外部的 CSS 文件來美化我們的頁面，并讓其具有更好的可讀性和吸引力。下面是一個簡單的例子，演示了如何在 Vue 頁面中引入 CSS 文件：

1.首先在 Vue 的根目錄下創建一個名為 “styles.css” 的 CSS 文件。

/* styles.css */
body {
background-color: #F4F4F4;
font-family: Arial, sans-serif;
color: #555;
}
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 14px;
line-height: 1.5;
}

2.然后在Vue 組件中通過import語句引入 CSS 文件。

// HelloWorld.vue
<template>
<div>
<h1>Hello World!</h1>
<p>This is a Vue.js component.</p>
</div>
</template>
<style scoped>
/* 引入樣式文件 */
@import url('./styles.css');
/* 樣式定義 */
.hello {
margin: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>

我們可以看到在 Vue 組件的 style 標簽下，通過 @import url('./styles.css') 語句將外部的 CSS 文件引入到組件中來。這個語句的作用類似于在 HTML 中使用 link 標簽引入 CSS 文件。

3.最后，在 Vue 組件中添加樣式類，并設置需要的樣式。

// HelloWorld.vue
<template>
<div class="hello">
<h1>Hello World!</h1>
<p>This is a Vue.js component.</p>
</div>
</template>
<style scoped>
/* 引入樣式文件 */
@import url('./styles.css');
/* 樣式定義 */
.hello {
margin: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 修改 h1 標題的樣式 */
.hello h1 {
color: #ff5a5f;
}
/* 修改 p 標簽的樣式 */
.hello p {
color: #333;
}
</style>

在這個例子中，我們給 Vue 組件添加了一個名為 "hello" 的樣式類，并設置了需要的樣式。我們還可以進一步修改 h1 標題和 p 標簽的樣式，以使頁面看起來更美觀和吸引人。

至此，我們已經成功地在 Vue 頁面中引入了 CSS 文件，并使用它來美化界面和設置樣式。