在web開發中，樣式表是不可或缺的一部分。

CSS即層疊樣式表，用于描述文檔的展示樣式。Vue作為一個流行的前端框架，也提供了方便的方式來引入CSS樣式表。

Vue模板引入CSS樣式表可以通過多種方式來實現。以下是其中幾種常見的方式：

<template>
<div class="wrapper" >
...
</div>
</template>
<style scoped>
.wrapper {
...
}
</style>

1. 使用scoped

scoped是一個Vue的特殊屬性，可以確保樣式只會作用于當前組件。其原理是為每個組件添加唯一的ID，從而對應樣式作用范圍。

使用scoped的好處是避免樣式的重疊影響，但是如果想要讓CSS樣式表作用于多個組件則不適用。

<template>
<div class="wrapper" >
...
</div>
</template>
<style>
@import "common.css";
.wrapper {
...
}
</style>

2. 使用@import

使用@import方式可以將公共的CSS樣式表文件導入到組件的樣式表中。這樣做可以減少樣式冗余，提高代碼復用性和可維護性。

但是，使用@import會增加CSS文件加載次數，對于大型項目可能會影響頁面性能。

<template>
<div class="wrapper" >
...
</div>
</template>
<style>
<![CDATA[
.wrapper {
...
}
]]>
</style>

3. 使用<![CDATA[</code>標簽

<![CDATA[</code>標記可以用來將文本數據標記為除XML標記之外的任意內容。使用該標記可以讓CSS樣式表不被解析為XML標記，從而避免瀏覽器的樣式錯誤。

<template>
<div class="wrapper" >
...
</div>
</template>
<style src="./common.css"></style>

4. 使用src引入CSS

使用<style src="./common.css"></style>方式可以將CSS樣式表文件整體引入到組件的樣式表中，避免了重復代碼的出現，而且也利于維護。

以上是幾種常見的Vue模板引入CSS樣式表的方式，需要根據具體業務場景和需求來選擇最適合自己的方式。