vue制作css
Vue 中制作 CSS 的常用方法
在 Vue 中可以通过多种方式编写 CSS，以下是常见的几种方法：
1. 单文件组件中的 <style> 标签
在 .vue 文件中直接使用 <style> 标签编写 CSS，支持原生 CSS 或预处理器（如 SCSS、Less）。
<template>
<div class="example">Hello Vue</div>
</template>
<style scoped>
.example {
color: red;
font-size: 16px;
}
</style>scoped属性会将 CSS 限定在当前组件内，避免样式污染。
2. 使用 CSS 预处理器
Vue 支持 SCSS、Less 等预处理器，需先安装对应的 loader（如 sass-loader、less-loader）。
<style lang="scss" scoped>
$primary-color: #42b983;
.example {
color: $primary-color;
}
</style>3. 内联样式绑定
通过 :style 绑定动态样式，适合需要响应式变化的样式。
<template>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
Dynamic Style
</div>
</template>
<script>
export default {
data() {
return {
textColor: 'blue',
fontSize: 14
};
}
};
</script>4. 全局样式
在 main.js 或单独 CSS 文件中引入全局样式：
import './assets/global.css';5. CSS Modules
通过 module 属性启用 CSS Modules，避免类名冲突。
<template>
<div :class="$style.example">CSS Modules</div>
</template>
<style module>
.example {
background: #f0f0f0;
}
</style>6. 第三方 CSS 库
直接引入如 Bootstrap、TailwindCSS 等库：
import 'bootstrap/dist/css/bootstrap.css';最佳实践
- 组件样式优先使用
scoped或 CSS Modules。 - 复用样式可提取为全局 CSS 或使用设计系统（如 SCSS 变量）。
- 动态样式推荐用
:style绑定。
以上方法可根据项目需求灵活组合使用。
