為了將網(wǎng)站樣式統(tǒng)一，我們通常會(huì)把相關(guān)的樣式定義在一個(gè)獨(dú)立的 CSS 文件中，并在需要的頁(yè)面中引入它。在使用 Vue 開(kāi)發(fā)網(wǎng)站時(shí)，我們同樣也需要引入通用樣式。下面就讓我們來(lái)看看如何在 Vue 中引入通用樣式。

首先，我們需要在項(xiàng)目中創(chuàng)建一個(gè)樣式文件，可以命名為 global.css 或者 common.css，這個(gè)文件里面定義了一些基礎(chǔ)的樣式，如顏色、字體、布局等。

/* global.css */
body {
font-size: 16px;
line-height: 24px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}

然后，我們?cè)陧?xiàng)目的入口文件 main.js 中引入該樣式文件，并且將其應(yīng)用到整個(gè)應(yīng)用程序中。具體操作是在 main.js 文件中使用 import 語(yǔ)句引入樣式文件，然后使用 import 語(yǔ)句引入 Vue，最后在 Vue 實(shí)例中的樣式選項(xiàng)中設(shè)置全局樣式。

import Vue from 'vue';
import App from './App.vue';
import './global.css';
new Vue({
render: h =>h(App),
// 設(shè)置全局樣式
style: `
body {
font-size: 16px;
line-height: 24px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
`
}).$mount('#app')

最后，在組件內(nèi)使用這些全局樣式。我們可以在組件定義中使用樣式類(lèi)名，也可以使用內(nèi)聯(lián)樣式。

在上面的例子中，我們引入了全局樣式文件 global.css，然后將其設(shè)置為 Vue 實(shí)例的樣式選項(xiàng)，最后在組件中使用了兩個(gè)樣式類(lèi)名和一個(gè)內(nèi)聯(lián)樣式。注意，在設(shè)置樣式時(shí)，我們還可以使用 LESS 或者 Sass 等預(yù)處理器。