前言
在前端领域，BEM (Block Element Modifier) 是一种流行的 CSS 命名规范，它使得代码更具有可读性和可维护性。而在使用 Vue 时，我们通常使用的是单文件组件 (SFC)，而 SFC 本身结构就符合 BEM 的设计原则。因此，使用 nuxt-bem-module 这个 npm 包可以方便快捷地实现 BEM 命名规范。
nuxt-bem-module 是什么？
nuxt-bem-module 是基于 nuxt.js 的项目中使用 BEM css 类名规范的一个 npm 模块，它可以帮助我们更便捷、更快速的将我们的样式组织成 BEM 结构。
nuxt-bem-module 的安装和配置
安装
--- ------- ---------------
配置
在 nuxt.config.js 中添加以下配置：
-------- -
-- ---
------------------
-- ---
--
---- -
----------- -
---------- ----- -- ------- ---- -------------------
----------- ----- -- ------- ---- -------------------
--------- ---- -- -------- ---- -----------------------
-
-配置完成后，我们可以在 Vue 的模板中使用如下语法生成 BEM 样式类名：
----------
---- ----------------------
----- ------------------------------------
----- -----------------------------------
------
-----------上面代码生成的 HTML 结构将是这样的：
---- ----------------------
----- ------------------------------------
----- -----------------------------------
------此时，我们已经成功地将样式类名转换成 BEM 命名规范。
nuxt-bem-module 如何结合 SCSS 一起使用
虽然 nuxt-bem-module 可以让我们快速拥有 BEM 命名规范的样式类名，但我们还需要在样式表中对其进行使用。这时，我们可以借助 SCSS 进行代码结构化和重用。
为了结合 SCSS 和 nuxt-bem-module，首先需要安装以下依赖：
--- ------- --------- -----------
接着，在 nuxt.config.js 中新增如下配置：
------ -
-------- -
----- -
--------------- -
------- ---------------------------------------
--------- -
-------- ------------------------- - -- --- -------- -----
-------- ------------------- - -- -- ----- -
-------- -------------- - -- -- ------- --
---------- -----
-
-------- ------------------ - -- -- -------- ---
-------- ----
--------------- -----
-
-
-
-
-
-
-
-这里我们可以看到，除了 @import "~nuxt-bem-module/src/styles/bem.scss";，我们还可以使用 SCSS 中的 mixin 和变量来实现样式模块化。
nuxt-bem-module 的灵活性
nuxt-bem-module 还在内置了灵活的 mixin，使得它不仅仅局限于在 Vue 中使用。假设我们需要在一个普通的 HTML/CSS 项目中使用 nuxt-bem-module，我们可以只需在 HTML 页面中引入 nuxt-bem-module 的 CSS 文件即可。具体操作如下：
首先，通过 npm 安装 nuxt-bem-module：
--- ------- ---------------
接着，我们可以在 HTML 页面中添加如下代码：
--------- -----
------
------
---
----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------
---
-------
------
---
-------
-------这样，我们就可以在任何 HTML/CSS 项目中使用 nuxt-bem-module。
总结
nuxt-bem-module 帮助我们更方便、更快速地实现了 BEM 命名规范，这使得我们的代码更具有可读性和可维护性。通过结合 SCSS，我们还可以实现样式模块化。nuxt-bem-module 的灵活性也使得它不仅仅局限于在 Vue 中使用。不过，还需要注意的是，nuxt-bem-module 只是帮助我们生成符合 BEM 命名规范的样式类名，我们还需要结合具体的项目进行实际的样式定义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671ca30d09270238227e8