如何在vue3中优雅的使用BEM规范

在团队开发中我们需要制定css命名规范，而BEM规范正是css命名规范的一种。我们项目用vue3开发，在网上找了一下没有找到合适自己想要的BEM框架，于是就自己写了一个，那么就给大家介绍一下vue3-bem。

BEM规范介绍

BEM是三个单词的缩写：Block（块）代表更高级别的抽象或组件，Element（元素） Block的后代，以及Modifier（修饰） 不同状态的修饰符。

规范公式： ${block}__${element}--${madifier} or ${block}--${madifier}

例如

<div class="header">
  <div class="header__button">
    <div class="header__button--selected"></div>
    <div class="header__button--unselected"></div>
  </div>
</div>

// 对应
.header {
  &__button {
    &--selected {
    }
    &--unselected {
    }
  }
}

安装

vue3-bem 帮助你在 vue3 中更简洁地使用 BEM 规范。

npm i vue3-bem or yarn i vue3-bem

使用-简单例子

// .vue
<template>
  <div :class="bem('elem', 'selected')"></div>
</template>

<script lang="ts" setup>
import useBem from "vue3-bem";
const bem = useBem("block");
</script>

// .less
.block {
  &__elem {
    &--selected {
    }
  }
}

Api

使用 useBem 设置 block。

使用 bem 配置element和 madifier 返回对应的class数组。

type BemFunction = function (
    e?: string | null,
    m?: string | string[] | { [key in string]: boolean }
) => string[];

function useBem(block: string) => BemFunction;

在vite中帮你去除import

如果你觉得每个组件都写 import 比较麻烦，可以使用插件 vite-plugin-vue3-bem 这样就不需要写 import vue3-bem了。

使用 vite-plugin-vue3-bem 可以帮助您删除导入。

用法如下：

block命名可以在script setup标签内加上bem-block参数，就可以了。

// .vue
<template>
  <div :class="bem('elem', 'selected')"></div>
</template>

<script lang="ts" bem-block="tip">
// do some thing
</script>

<style lang="less"> 
.tip {
  &__elem {
    &--selected {
    }
  }
}
</style>

// vite.config.js
import ViteVue3Bem from "vite-plugin-vue3-bem";

plugins:[
    ViteVue3Bem()
]

ts类型声明：使用 vite-plugin-vue3-bem插件就不需要import了，但在ts缺少类型声明，可以在*.d.ts上加下入下代码：

// env.d.ts
import "vue3-bem";

效果如下：

Vue3-bem 例子

普通使用

<div class="tip">
    <div :class="bem("wrap")"></div>
</div>

<script setup bem-block="tip">
</script>

.tip {
    &__wrap {
    }
}

配置修饰符

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('item',  ["selected", "highlighted"])"></div>
</div>

<script setup bem-block="tip">
</script>

.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}

使用条件式变量修饰

<div :class="bem('container')">
    <div :class="bem("header")"></div>
    <div :class="bem('item',  {"selected": true, "highlighted": highlighted})"></div>
</div>

<script setup bem-block="tip">
    const highlighted = ref(false);
</script>

.tip {
    &__header {
    }
    &__item {
        &--selected {
        }
        &--highlighted {
        }
    }
}

结尾

以上就是vue3-bem的基本用法了，在组件开发中我觉得还是挺简洁的，大家有更好的想法可以提给我哈，也欢迎一起共建，感兴趣的老铁也可以给个star 🌟🌟🌟