Vue 几种常见的样式策略用法

html才是最好的语言

已于 2023-06-08 14:32:01 修改

阅读量201

点赞数

文章标签： vue.js javascript 前端

于 2023-06-06 12:08:37 首次发布

本文链接：https://blog.csdn.net/qq_21382777/article/details/131065002

版权

Vue 中几种常见的样式策略

使用全局样式

在 Vue 项目中，可以通过在 public/index.html 页面中引入全局样式的 CSS 文件，来设置全局样式，这样所有的组件都可以使用这份样式。例如：
```
<head>
  <link rel="stylesheet" href="assets/styles/global.css">
</head>
```
这种方式比较简单直接，但可能会造成全局样式被污染、样式冲突等问题。
使用 scoped 样式

在 Vue 组件中，可以通过给 <style> 标签添加 scoped 属性，来限制样式只对当前组件生效，例如：
```
<template>
  <div class="wrapper">
    <h1>Hello, Vue!</h1>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f1f1f1;
  padding: 20px;
}

h1 {
  font-size: 32px;
}
</style>
```
这种方式可以有效地避免样式冲突的问题，但是也会有一些局限性，例如无法修改子组件中的样式等。
使用 CSS 模块

CSS 模块是在 Vue 组件中使用 CSS 的一种方式，它可以让样式不被污染，同时可以实现样式复用和组件化，隔离不同组件的样式。例如：
```
<template>
  <div :class="$style.wrapper">
    <h1>Hello, Vue!</h1>
  </div>
</template>

<style module>
.wrapper {
  background-color: #f1f1f1;
  padding: 20px;
}

h1 {
  font-size: 32px;
}
</style>
```
这种方式需要使用 css-loader 和 vue-style-loader 对 CSS 进行处理，需要在 webpack.config.js 中进行相应的配置。
使用 CSS 预处理器

在 Vue 项目中，可以使用 CSS 预处理器，例如 Less、Sass、Stylus 等，来使样式代码更加易维护和优雅。例如：
```
$color-primary: #00bcd4;

.wrapper {
  background-color: #f1f1f1;

  h1 {
    color: $color-primary;
    font-size: 32px;
  }
}
```
这种方式需要在项目中安装相应的预处理器，并在 <style> 标签中添加 lang 属性来指定使用的预处理器，例如 lang="scss"。

html才是最好的语言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 几种常见的样式策略用法

CSS 模块是在 Vue 组件中使用 CSS 的一种方式，它可以让样式不被污染，同时可以实现样式复用和组件化，隔离不同组件的样式。在 Vue 项目中，可以使用 CSS 预处理器，例如 Less、Sass、Stylus 等，来使样式代码更加易维护和优雅。页面中引入全局样式的 CSS 文件，来设置全局样式，这样所有的组件都可以使用这份样式。这种方式可以有效地避免样式冲突的问题，但是也会有一些局限性，例如无法修改子组件中的样式等。这种方式需要在项目中安装相应的预处理器，并在。在 Vue 项目中，可以通过在。
复制链接

扫一扫