在前端开发中，我们经常需要生成一些样板代码，比如类、组件、页面等。虽然可以手动复制粘贴进行生成，但是这种方式十分繁琐，且容易出错。为了提高开发效率，我们可以使用一个便捷的 npm 包 —— gen-gen 。
gen-gen 是什么？
gen-gen 是一个基于 Node.js 的命令行工具，通过简单的命令即可生成指定类型的模板文件。使用 gen-gen 可以方便快捷地生成各种常见的模板文件，例如 class、component、page 等。
如何安装 gen-gen ？
使用 npm 可以非常方便地安装 gen-gen 。运行以下命令即可：
npm install -g gen-gen
-g 是全局安装的参数，会将 gen-gen 安装在全局环境下，方便我们在任何地方使用。
gen-gen 的使用方法
gen-gen 的使用非常简单，主要分为以下几个步骤。
1.查看帮助文档
可以使用以下命令查看 gen-gen 的帮助文档：
gen-gen --help
帮助文档会列出 gen-gen 中所有的可用命令以及使用示例。
2.生成文件
使用 gen-gen 能够生成多种类型的样板代码。每种样板代码使用不同的命令来生成。以下是常用的命令：
- 生成 class
gen-gen class [classname]
其中 classname 是需要创建的 class 的名称。
以下是生成 class 的示例：
gen-gen class TestClass
运行该命令后，将在当前目录下生成一个 TestClass.js 文件，其内容如下：
class TestClass {
constructor() {}
}
export default TestClass;- 生成 component
gen-gen component [componentname]
其中 componentname 是需要创建的 component 的名称。
以下是生成 component 的示例：
gen-gen component TestComponent
运行该命令后，将在当前目录下生成一个 TestComponent.vue 文件，其内容如下：
-- -------------------- ---- -------
----------
---- -----------------------
---- ---------
------
-----------
--------
------ ------- -
----- ---------------
-
---------- 生成 page
gen-gen page [pagename]
其中 pagename 是需要创建的 page 的名称。
以下是生成 page 的示例：
gen-gen page TestPage
运行该命令后，将在当前目录下生成一个 TestPage.vue 文件，其内容如下：
-- -------------------- ---- -------
----------
---- ------------------
---- ----
------
-----------
--------
------ ------- -
----- ----------
-
---------对于上述命令中的 classname、componentname、pagename ，可以根据需要进行自定义。
3.自定义模板
除了生成默认的样板代码，也可以在 gen-gen 的配置文件中自定义模板。默认情况下，gen-gen 使用的是内置模板。配置文件可以使用以下命令打开：
gen-gen config
以下是修改配置文件内容的示例：
-- -------------------- ---- -------
-------------- - -
---------- -
-- ----- --
------ -
-- --------
----- -----------------------
-- --------------- -- -- -----
-------- -
---------- --- --------- ---
--
-- ---------
------- -----
--
-- --------- --
---------- -
----- ----------------------------
-------- -
-------------- --- ------------- ---
--
------- ------
--
-- ---- --
----- -
----- -----------------------
-------- -
--------- --- -------- ---
--
------- ------
-
-
-文件中包含了三个模板：class、component 和 page。模板文件的路径、需要替换的变量名和生成文件的后缀都可以进行自定义。
总结
gen-gen 可以帮助我们快速生成各种常见的模板文件，可大大提高开发效率。希望本文给大家带来一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005534881e8991b448d084d