vue 之 css module的使用方法

我来给你详细讲解一下“vue之CSS Module的使用方法”的完整攻略。

1. 什么是CSS Module

CSS Module是CSS的一种模块化方案，与其它CSS的模块化方案如Sass、Less等不同的是，它是由JavaScript模块化方案驱动的，而不是依赖于编译器或预处理器。CSS Module可以帮助我们解决CSS全局污染的问题，让我们的CSS样式变得更加可维护和易读。

2. 在Vue项目中使用CSS Module的步骤

2.1 安装依赖包

yarn add postcss-modules

或者

npm install postcss-modules --save-dev

2.2 配置webpack

在Vue项目的webpack.base.conf.js中添加postcss-loader的配置，具体如下：

{
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启CSS Module
              modules: true,
              // 设置生成的类名的格式
              localIdentName: '[hash:base64:5]',
              // 开启PostCSS
              importLoaders: 1,
            },
          },
          // 添加postcss-loader的配置
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('postcss-modules')({
                  // 生成的类名的格式与设置的localIdentName格式相同
                  generateScopedName: '[hash:base64:5]',
                }),
              ],
            },
          },
        ],
      },
      // ...
    ]
  }
}

2.3 在Vue组件中使用CSS Module

在Vue组件中，通过<style>标签的module属性来开启CSS模块化，并可以直接使用生成的类名，例如：

<template>
  <div :class="$style.wrapper">
    <p :class="$style.title">Hello World!</p>
  </div>
</template>

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

.title {
  font-size: 24px;
  color: blue;
}
</style>

3. 示例说明

3.1 示例1：带有CSS Module的Button组件

<template>
  <button :class="$style.btn" @click="handleClick">
    <slot></slot>
  </button>
</template>

<style module>
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #4caf50;
  color: #ffffff;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}
</style>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>

在使用该组件时，可以像下面这样使用：

<template>
  <div>
    <Button @click="handleClick">Click Me</Button>
  </div>
</template>

<script>
import Button from './Button.vue';

export default {
  components: { Button },
  methods: {
    handleClick() {
      alert('Hello World!');
    },
  },
};
</script>

3.2 示例2：带有CSS Module的列表组件

<template>
  <ul :class="$style.list">
    <li v-for="(item, index) in list" :key="index" :class="$style.item">
      {{ item }}
    </li>
  </ul>
</template>

<style module>
.list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  border: 1px solid #cccccc;
  padding: 10px;
  margin: 10px 0;
}
</style>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

在使用该组件时，可以像下面这样使用：

<template>
  <div>
    <List :list="list"></List>
  </div>
</template>

<script>
import List from './List.vue';

export default {
  components: { List },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
    };
  },
};
</script>

以上就是关于“Vue之CSS Module的使用方法”的完整攻略，希望能对你有所帮助。