在 Vue 中,可以使用全局樣式表來定義公共通用的 CSS 樣式,這些樣式可以在整個應(yīng)用程序中使用,提高開發(fā)效率和代碼的可維護(hù)性。
在 Vue 項目中創(chuàng)建一個全局樣式表文件,`common.css`,在此文件中編寫公共通用的 CSS 樣式。
```css
/* common.css */
.btn-primary {
background-color: #007bff;
border-color: #007bff;
color: #fff;
.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
color: #fff;
.btn-success {
background-color: #28a745;
border-color: #28a745;
color: #fff;
.btn-info {
background-color: #17a2b8;
border-color: #17a2b8;
color: #fff;
```
在 Vue 組件中使用這些樣式,可以通過以下兩種方式之一來實現(xiàn):
1. 全局導(dǎo)入:在 `main.js` 或 `app.js` 文件中導(dǎo)入 `common.css` 文件。
```javascript
import Vue from 'vue';
import App from './App.vue';
import './common.css'; // 導(dǎo)入公共樣式表
new Vue({
render: h => h(App),
});
```
2. 局部導(dǎo)入:在每個組件的 `style` 標(biāo)簽中導(dǎo)入 `common.css` 文件。
```vue
```
通過以上方式,可以在 Vue 應(yīng)用程序中輕松地使用公共通用的 CSS 樣式。