BEM 是块、元素、修饰符的缩写，是一种前端命名规范。在前端开发过程中，为 HTML 元素添加 BEM 类名既能提高代码的可读性，也能降低代码的耦合性。使用 BEM 规范的 CSS 可以轻松地重复利用和维护，同时也可以提高页面的渲染效率。vue-bem-helper 是一个基于 BEM 的命名规范的 npm 包，它提供了类 BEM 的功能来帮助前端开发人员更容易地管理和维护 css 类。
安装
可以通过 npm 进行安装：
npm install vue-bem-helper
使用
在使用 vue-bem-helper 之前，需要在 Vue 中注册插件：
import VueBemHelper from 'vue-bem-helper' Vue.use(VueBemHelper)
使用 vue-bem-helper 可以通过以下方法生成 css 类名：
block
生成块级名：
this.$b('block') // 'block'element
生成元素名：
this.$b('block', 'element') // 'block__element'modifier
生成修饰符名：
this.$b('block', { modifier: 'modifier' }) // 'block block--modifier'
this.$b('block__element', { modifier: 'modifier' }) // 'block__element block__element--modifier'multiple-modifiers
生成多个修饰符名：
this.$b('block', { modifier: ['modifier1', 'modifier2'] }) // 'block block--modifier1 block--modifier2'mix
生成 BEM 类名的同时，允许添加普通的 css 类名：
this.$b('block', { mix: 'normal-class' }) // 'block normal-class'示例
在下面的示例中，我们将通过 vue-bem-helper 实现一个简单的切换按钮效果：
-- -------------------- ---- -------
----------
------- ------------------- ----------------------- ------- -----------
-----------
--------
------ ------- -
---- -- -
------ -
--------- -----
-
--
--------- -
------- -- -
------ ------------- - ---- - ----
--
---------- -- -
------ -------------- - --------- - ------- ------------- - --
-
--
-------- -
----------- -- -
------------- - --------------
-
-
-
---------
------ -------
---- -
-------- -------------
-------- ----
------- --- ----- -----
----------------- -----
-------------- ----
-------- -----
------------ -----
------- --------
----------- --- --- ------------
-
------------ -
----------------- -----
------ -----
-
--------在上面的代码中，我们通过 $b 方法生成了 btn 按钮组件的类名，并且根据 isActive 数据不断切换样式。这使得样式的维护变得很方便，并能够提高代码的可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66a09