Vue 是一個流行的前端 JavaScript 框架。作為一個常用的前端框架，Vue 允許你輕松創(chuàng)建結(jié)構(gòu)清晰、模塊化的應(yīng)用程序。在使用 Vue 的過程中，我們肯定會遇到很多重復(fù)的 CSS 代碼，這樣既不美觀也不方便。因此，我們可以通過一些技巧來優(yōu)化和精簡我們的 CSS 代碼。

這里介紹一個實現(xiàn) Vue 公共 CSS 的技巧，可以讓你的代碼更加簡潔，易于維護。首先，我們可以將 CSS 放在一個單獨的文件中，并將所有公用 CSS 規(guī)則放到一個 style 標簽中，如下所示：

<style>
/* 公用樣式 */
.button {
padding: 5px 10px;
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
/* 其他樣式 */
.container {
width: 80%;
margin: auto;
}
</style>

這樣，我們將公用的 CSS 全部放在了一個 style 標簽中，方便我們管理和維護。接著，我們可以使用組件中的 scoped 屬性來限制 CSS 的作用域，同時還可以避免樣式的沖突。如下所示：

<template>
<div class="container">
<button class="button">點擊我</button>
</div>
</template>
<style scoped>
/* 將公用的樣式引入到組件中 */
@import 'common.css';
/* 此處可定義模塊自己的 CSS */
</style>

注意，我們在這里使用了 @import 指令來引入公用 CSS 文件。然后，在 style 標簽中，我們只需要定義當前組件獨有的 CSS 即可，其它的樣式會自動繼承自公共樣式。

總之，使用 Vue 的公用 CSS 技巧可以讓我們的代碼更加簡潔和易于維護。我們可以將公用的 CSS 規(guī)則放進一個 style 標簽中，然后使用 scoped 屬性來限制 CSS 的作用域，同時避免樣式的沖突。這一技巧不僅適用于 Vue，也可以應(yīng)用于其它前端框架，如 React、Angular 等。