在Vue中引入公用样式几种方式·中引入该样式文件·创建公用样式文件比如`common.css`
作者：网络发烧程序猿 |
发布时间：2025-07-02 |
在Vue中引入公用样式的几种方式
在Vue项目中，让样式全局生效而不必在每个组件中重复引入，是提升开发效率的好方法。以下是一些常见的方法：
方法一：在main.js中引入
这种方式适用于确保样式在应用中的全局有效性。
1. 创建公用样式文件，比如命名为`common.css`。
2. 在文件中编写公用样式规则。
3. 在`main.js`中引入该样式文件。
```javascript
import './common.css';
```
方法二：在App.vue中引入
这种方法与在`main.js`中引入类似，但将样式引入逻辑集中在一个文件中。
1. 创建公用样式文件，比如`common.css`。
2. 在文件中编写公用样式规则。
3. 在`App.vue`中引入该样式文件。
```javascript
```
每种方法都有其适用场景。选择合适的方法可以更有效地管理和维护样式，提高开发效率。在大型项目中，建议使用Vue插件方式；在小型项目或简单场景中，可以选择在`main.js`或`App.vue`中引入全局样式。