在前端開發中，我們通常會將公共樣式單獨抽離出來，以便多個組件或頁面共用。在Vue中，我們可以通過引入外部樣式文件或者使用全局樣式來實現公共樣式的引用。

首先推薦使用外部樣式文件的方式，將公共樣式放在一個.css文件中，然后在入口文件main.js中通過import的方式引入，例如：

import './assets/css/common.css'

這樣，在任何組件或頁面中，都可以直接使用公共樣式，例如：

<template>
<div class="common-style">
<p>這是一個公共樣式</p>
</div>
</template>
<style>
.common-style{
font-size: 16px;
color: #333;
}
</style>

注意，這里我們在樣式表中使用的是class選擇器，而非常見的id選擇器。因為在Vue中，id選擇器會被組件作用域所限制，無法作為公共樣式使用。

如果你想使用全局樣式，并且也不想使用.css文件，在Vue中也是可以實現的。我們可以在入口文件main.js中引入一個全局樣式，然后使用Vue.mixin將其添加到每個組件的樣式中，例如：

//在main.js中引入全局樣式
import './assets/css/global.css'
//添加全局樣式到組件中
Vue.mixin({
mounted: function () {
let styles = this.$options.styles || [];
styles.push(this.$options.globalStyle);
this.$options.styles = styles;
},
computed: {
styleStr: function () {
return this.$options.styles.join('\n');
}
}
});
//在組件中使用全局樣式
<template>
<div>
<p class="common-style">這是一個公共樣式</p>
</div>
</template>
<script>
export default {
globalStyle: {
'.common-style': {
fontSize: '16px',
color: '#333',
}
},
...
}
</script>
<style scoped>
{{styleStr}}
</style>

上述代碼中，我們在組件定義中添加了globalStyle屬性，并定義了'.common-style'選擇器的樣式；在全局mixin中，我們將所有組件的樣式都添加到一個數組中，然后通過計算屬性將其拼接為一個字符串，并在scoped樣式表中使用。

需要注意的是，這種方式可能會帶來一定的性能問題，因為每個組件渲染時都需要將全局樣式合并。所以我還是更推薦使用第一種方式。

最后，為了使你的樣式在各種瀏覽器中表現一致，建議你使用瀏覽器重置樣式表。在現代項目中，通常使用normalize.css或reset.css這樣的庫來重置樣式。在Vue中，你只需要在入口文件main.js中引入庫文件即可使用。

import 'normalize.css'

這樣，我們就可以方便地引用公共樣式了。