在vue中使用css modules替代scroped的方法

下面是在Vue中使用CSS Modules替代Scoped的方法的完整攻略：

1. 什么是CSS Modules？

CSS Modules是一种将CSS模块化的方式，可以解决CSS命名空间的问题。

CSS模块化是在CSS规范的基础上实现的，它支持在CSS文件中使用变量、函数、嵌套、mixins等特性，同时提供了局部作用域，避免了全局命名空间的污染，而CSS Modules则是一个用于实现CSS模块化的工具。

在Vue项目中，默认使用的是Scoped（局部）的CSS样式，在样式后面自动添加一个唯一的文件ID，来创建一个作用域。但是，Scoped样式只能保证组件样式不冲突，但是组件内部的样式命名仍然可能发生重复。

而使用CSS Modules则可以更彻底的解决样式命名冲突的问题。

2. 在Vue项目中使用CSS Modules

2.1 安装CSS Loader

在Vue项目中，使用CSS Modules需要安装CSS Loader，可以通过以下命令安装：

npm install --save-dev css-loader

2.2 修改Webpack配置

在Vue项目中，Webpack是用于构建打包的工具，因此我们需要在Webpack配置文件中进行修改，以使用CSS Loader。

在vue.config.js文件添加如下配置：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.m?css$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[name]_[local]_[hash:base64:5]'
                }
              }
            }
          ]
        }
      ],
    },
  }
};

在rules数组中添加一个新的规则，用于处理以.m.css结尾的文件。localIdentName用于生成本地类名的格式，可以根据需要进行修改。

2.3 编写CSS Modules格式的样式文件

在.m.css格式的文件中，可以使用CSS模块化的语法，然后在Vue组件中引入该样式文件：

/* style.m.css */

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}

<!-- App.vue -->

<template>
  <div class="app">
    <div :class="$style.box">This is a box</div>
  </div>
</template>

<style module="./style.m.css" scoped>
.app {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
</style>

在Vue组件中，使用:class="$style.box"的方式来引用CSS Modules中的样式，可以使用$style对象来访问经过处理的本地类名。

使用import style from './style.m.css'导入CSS Modules样式的方式也是可以的，但是，在Vue组件中使用的类名可能会和其他组件中的类名冲突。

3. 示例说明

以下是关于在Vue中使用CSS Modules的两个示例说明：

示例1：创建一个Banner组件

在该组件中，使用CSS Modules设置Banner的样式：

/* banner.m.css */

.banner {
  width: 100%;
  height: 200px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: blue;
}

在Banner组件的模板中，使用$style对象引用CSS Modules中的样式：

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

<script>
import style from './banner.m.css'

export default {
  name: 'Banner',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  computed: {
    $style: () => style
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>

在Vue组件中使用计算属性$style来指向样式文件中的样式，这样就可以在模板中使用$style来引用CSS Modules中的样式了。

示例2：使用BEM风格的CSS Modules

在该示例中，我们将使用BEM（Block Element Modifier）风格的CSS Modules，BEM是一种常见的CSS命名规范，它可以使样式更加可读、易于维护。

在BEM风格中，每个样式类都由三部分组成：块（block），元素（element）和修饰符（modifier）。例如，在BEM风格中，用于按钮样式的类名可以是button、button__text和button--disabled，其中button是块，button__text是元素，button--disabled是修饰符。

/* button.m.css */

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: blue;
}

.button__text {
  font-weight: bold;
}

.button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

在Vue中，我们可以像下面这样使用BEM风格的CSS Modules：

<template>
  <button :class="$style.button" :disabled="disabled">
    <span :class="$style['button__text']">{{ text }}</span>
  </button>
</template>

<script>
import style from './button.m.css'

export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      required: true
    },
    disabled: Boolean
  },
  computed: {
    $style: () => style
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>

在Vue模板中，使用$style对象来引用CSS Modules中的样式，并且使用$style['button__text']的方式来访问元素类。