眾所周知，前端開發中最重要的一點就是樣式的設計，一個精美的頁面不只需要邏輯清晰的代碼，還需要耐人尋味的視覺表現。對于Vue的開發來說，其中的樣式問題同樣重要，而為了方便多個模塊之間復用或者統一風格，我們常常需要使用公共樣式。

// 下面是一個簡單的例子，演示如何在Vue中使用公共樣式
/* public.scss */
/** 寫一些通用樣式 */
/** 其它的 */
// 以一個組件Button為例：
/* Button.vue */

上面的代碼演示了，我們可以在style標簽中使用@import指令來引入公共樣式。這樣子就可以在Button組件內使用公共樣式了。

但這樣子也存在一些麻煩：每次我們新建組件的時候需要重復輸入import指令。當我們需要一些配置、或者某些變量可以透傳給所有的公共樣式使用時，這種方法就顯得非常笨重了。

其實Vue提供了更為優雅的方式——全局樣式。

// 我們可以使用 Vue.mixin 掛載一個混入對象
// 全局公共樣式就可以在這里統一定義
/* main.js */
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.mixin({
mounted() {
document.title = '我的網站'
}
})
new Vue({
el: '#app',
router,
components: { App },
template: ''
})

上面的代碼演示了，我們在main.js中使用Vue.mixin掛載了一個混入對象。這個對象就可以用來定義全局的公共樣式等設置。由于它掛載的是Vue構造器，所以它會作用到任何組件中，即全局生效。

這種方法的好處就在于，我們可以在應用程序的任何位置定義全局CSS和全局JS。所以全局公共樣式不必寫在一個公共的樣式文件中，這使得我們可以更加靈活的組織代碼。

熟練掌握Vue公共樣式的使用技巧，可以讓我們的前端開發工作更加高效、代碼更加簡潔、風格更加統一。