Vue3新特性之在Composition API中使用CSS Modules

下面是针对“Vue3新特性之在Composition API中使用CSS Modules”的完整攻略。

什么是CSS Modules？

CSS Modules是一种流行的CSS样式处理器，它允许我们将CSS代码限定在组件范围内，从而避免了样式之间的污染和覆盖。 在CSS模块中，样式类名不是全局的，而是局部的，通过这种方式，我们能够在写CSS样式代码时避免影响其他组件。

在Vue3中使用Composition API

Vue3中新增了Composition API，它能够更好地组织和重用逻辑代码，提高代码的可读性和可维护性。在Composition API中，我们可以使用一些钩子函数来组织我们的逻辑代码，如setup()、onMounted()、onUpdated()、onUnmounted()等等。

在Composition API中使用CSS Modules

在Vue3中，我们可以很方便地在Composition API中使用CSS Module。下面是具体步骤：

第一步：安装CSS Modules

首先，我们需要在项目中安装CSS Modules依赖：

npm install --save-dev postcss postcss-modules

然后，在项目根目录下新增一个postcss.config.js文件，文件内容如下：

module.exports = {
  plugins: {
    'postcss-modules': {
      // 指定 CSS Modules 的类名生成器，默认为 [hash:base64]
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    }
  }
};

改动完成后，我们还需要相应的webpack配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          'postcss-loader'
        ]
      },
      // ...
    ]
  }
}

第二步：在组件中引入CSS Modules

一旦上述改动完成，我们就可以在组件中引入CSS Modules了。这里，我们可以使用import来引入CSS文件：

<template>
  <div :class="$style.wrapper"></div>
</template>

<script>
import styles from './Page.css';

export default {
  setup() {
    return {
      // 这里的 $style 是从上面引入的 CSS Module 生成的
      // wrapper 是我的 CSS 文件中定义的一个类名
      $style: styles,
    };
  },
};
</script>

<style scoped module>
/* 这里的样式规则只在该组件中生效 */
.wrapper {
  font-size: 16px;
  color: #333;
}
</style>

示例说明1：基本的CSS Modules组件

下面是一个简单的CSS Modules组件示例，代码如下：

<template>
  <div :class="$style.wrapper">
    <h1 :class="$style.title">{{ title }}</h1>
    <p :class="$style.content">{{ content }}</p>
  </div>
</template>

<script>
import styles from './MyComponent.css';

export default {
  // 在 `setup` 钩子中引入 CSS Module
  setup() {
    return {
      // 在 `styles` 中定义的 CSS 类名，在 `$style` 中被转成哈希
      $style: styles,
      title: 'Hello, CSS Modules!',
      content: 'CSS Modules 是一个非常好用的样式处理器！',
    };
  },
};
</script>

<style scoped module>
/* 这里的样式规则只在该组件中生效 */
.wrapper {
  border: 1px solid #ddd;
  padding: 20px;
}
.title {
  font-size: 24px;
  margin-bottom: 10px;
}
.content {
  font-size: 18px;
  color: #666;
}
</style>

示例说明2：在逻辑代码中使用CSS Modules

我们可以在逻辑代码中生成CSS Modules样式类名，以实现更高的可复用性和可读性。

<template>
  <div :class="generateClassName('wrapper')">
    <h1 :class="generateClassName('title')">{{ title }}</h1>
    <p :class="generateClassName('content')">{{ content }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

// 在逻辑代码中引入 CSS Modules
import styles from './MyComponent.css';

export default {
  setup() {
    const title = ref('Hello, CSS Modules!');
    const content = ref('CSS Modules 是一个非常好用的样式处理器！');

    // 生成 CSS Modules 样式类名
    const generateClassName = (className) => {
      // 在 `styles` 中定义的 CSS 类名，在 `$style` 中被转成哈希
      return styles[className];
    };

    return {
      generateClassName,
      title,
      content,
    };
  },
};
</script>

<style scoped module>
/* 这里的样式规则只在该组件中生效 */
.wrapper {
  border: 1px solid #ddd;
  padding: 20px;
}
.title {
  font-size: 24px;
  margin-bottom: 10px;
}
.content {
  font-size: 18px;
  color: #666;
}
</style>

这里，我们利用逻辑代码中引入CSS Module的方式，来生成CSS Module的样式类名。这样做可以提高代码复用性和可读性，推荐大家尝试一下。