vue scoped vs css module

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

我为什么会学习vue?

• 1、公司的技术栈是vue(可能觉得国内vue使用的人比较多，并且上手比较快)
• 2、公司还有一些小程序的项目，都是采用微信原生开发的，这和vue很相似
• 3、时代在进步，个人技术也需要不断进步更新才能做大做强
• 4、前端目前react和vue是比较火热的，孰好孰坏众说纷纭，为了能插上嘴，决定都学习下（作为菜鸡的我还没资格说哪个更优，所以它们都是我未来重点学习的对象，况且各个框架都是为了解决一部分问题而诞生的，适合自己适合当下环境的便是最好的，没有明确的优劣之分）

之前有简单了解过vue2.0，但只是简单了解了生命周期、data之类的，现在有了vue3.0就准备直接学习vue3.0，之前一直用的是react,小程序用的是Taro开发的，可以说是第一次正式的接触vue了。

day1: scoped vs css module

之前react的项目一直用的scss，所以css module是知道的，但scoped好像是vue自有的东西，下面简单使用看看区别在哪里

先准备下样式

1、css module

vue cli要添加webpack相关的配置，需要在根目录创建一个vue.config.js来进行相应的配置，下面就是css module相关的配置啦

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "vue-style-loader",
          {
            loader: "css-loader",
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: "[local]_[hash:base64:8]",
            },
          },
        ],
      },
    ],
  },
};

添加好之后就是在具体的页面中使用啦 现在标签上添加“module”，使用时通过$style变量的形式来添加对应的class

最后在浏览器看下效果

成功的在class名上添加了用来区分的后缀

2、scope
scope的使用就比较简单了 直接<style scoped>

scoped的方式是在对应的标签上添加了属性作为唯一标识

整体使用下来 scoped的方式也很nice耶，不需要任何其他配置就能直接使用。