Vue是一種流行的JavaScript框架，它允許開發(fā)人員創(chuàng)建動(dòng)態(tài)Web應(yīng)用程序。一個(gè)Vue應(yīng)用可能包含不同組件，每個(gè)組件都有其自己的樣式。但是，有時(shí)候我們需要在整個(gè)應(yīng)用程序范圍內(nèi)使用某些共享的樣式，這時(shí)候就需要使用全局CSS。

// 在全局CSS文件中定義樣式
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.btn {
background-color: #4088FF;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

如上所示，我們可以在全局CSS文件中定義所需的樣式。這些樣式將應(yīng)用于整個(gè)Vue應(yīng)用程序，而不僅僅是單個(gè)組件。

在Vue應(yīng)用程序的<template>中，我們可以像平常一樣使用CSS類，就像這樣：

<template>
<div class="container">
<h1>Hello World!</h1>
<button class="btn">Click Me</button>
</div>
</template>

使用class屬性將應(yīng)用程序中的元素鏈接到全局CSS文件中定義的樣式。

如果我們需要在組件中重新定義某些全局CSS樣式，我們可以使用scoped屬性：

<template>
<div class="container" scoped>
<h1>Hello World!</h1>
<button class="btn">Click Me</button>
</div>
</template>
<style scoped>
h1 {
color: red;
}
.btn {
background-color: green;
}
</style>

在上面的示例中，我們使用scoped屬性將樣式應(yīng)用于僅此組件，而不會(huì)影響全局CSS文件中的樣式。

在Vue應(yīng)用程序中寫全局CSS是很有用的，因?yàn)樗试S我們?cè)谡麄€(gè)應(yīng)用程序中使用一致的樣式。而且，如果需要更改某些樣式，只需要編輯全局CSS文件即可。