vue3에서 BEM을 우아하게 사용하는 방법

팀 개발에서는 css 명명 규칙을 공식화해야 하며, BEM 사양은 css 명명 규칙 중 하나입니다. 우리 프로젝트는 vue3로 개발했는데 인터넷에서 원하는 BEM 프레임워크를 찾지 못해서 제가 직접 작성해서 vue3-bem를 소개해드리겠습니다.

설치

npm i vue3-bem

사용

vue3-bem도 사용하기 매우 쉽습니다. 아래 그림과 같이.

// .vue
import useBem from "vue3-bem";
const bem = useBem("block");

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

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

API

useBem를 사용하여 블록을 설정합니다.
bem를 사용하여 클래스를 반환하도록 요소 및 수정자를 구성합니다.

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

function useBem(block: string) => BemFunction;

bem: BemFunction

도구

각 구성 요소에 대해 가져오기를 작성하는 것이 너무 번거롭다고 생각되면 플러그인vite-plugin-vue3-bem을 사용할 수 있으므로 가져오기vue3-bem를 작성할 필요가 없습니다.

vite-plugin-vue3-bem을 사용하면 가져오기를 제거하는 데 도움이 됩니다.

// .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()
]

유형 선언
오류 보고를 방지하려면 typescript에서 유형 선언이 필요합니다.

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

예시

사용자 지정 블록 이름

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

<script setup>
import useBem from "./useBem";
const bem = useBem('tip');
</script>

.tip {
    &__wrap {
    }
}

인라인 수정자

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

<script setup>
import useBem from "./useBem";
const bem = useBem('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>
    import useBem from "./useBem";
    const bem = useBem('tip');
    const highlighted = ref(false);
</script>

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

도움이 될 것 같으면 별표를 주십시오.

github: vue3-bem