VuePress 是一个基于 Vue.js 的轻量级静态站点生成器，可用于构建 API 文档、技术文档等类型的站点。而 vuepress-plugin-new 则是一个 VuePress 的插件，用于自动生成文件和目录的模板。
本文将带你一步步学习如何使用 vuepress-plugin-new 插件，并展示其实际应用的示例代码。
安装 vuepress-plugin-new
首先，我们需要安装 vuepress-plugin-new。在终端中执行以下命令即可：
npm install vuepress-plugin-new --save-dev
成功安装后，在 VuePress 项目的配置文件 config.js 中加入插件配置：
-- -------------------- ---- -------
-------------- - -
-------- -
----------------------- -
----------- --------
------ -
-
----- --------
-------- -----------
------------ -
------ ------
-
--
-
----- --------
-------- -----------
------------ -
------ -------
-
-
-
--
-
-以上是一个简单的配置示例，其含义为：
newDirName: 新建文件的目录名称，这里设置为pages。files: 配置要生成的文件。
其中，每个文件包括以下属性：
name: 文件名。tplName: 模板文件名。如果没有指定，则默认为name.md。frontmatter: 文件的 Frontmatter 配置。比如，title字段表示该文件的标题。
使用 vuepress-plugin-new
配置好插件后，就可以使用 vuepress-plugin-new 生成文件了。在终端中执行以下命令：
vuepress new about
这会在项目根目录下的 pages 目录中，自动生成一个名为 about.md 的文件，该文件的 Frontmatter 标题为 About。
示例代码
这里提供了一个完整的 config.js 文件示例，代码注释中有详细的说明：
-- -------------------- ---- -------
-------------- - -
------ --- -------- ------
------------ ----- - ---- ------
-- ----
-------- -
-- -- -------------------
----------------------- -
-- --------
----------- --------
-- --------
------ -
-
-- ---
----- --------
-- -----
-------- -----------
-- ----------- --
------------ -
------ -------
-
--
-
----- ----------
------------ -
------ -------- ---
-
--
-
----- -------
------------ -
------ -------
------- ------------
-
-
-
--
--
-- -----
-------- -
----------- -------------------------
-
-在此基础上，执行下面的命令：
vuepress new contact vuepress new news
将会生成以下文件：
./pages/about.md ./pages/contact.md ./pages/news.md
其中，about.md 的 Frontmatter 标题为 About，contact.md 的 Frontmatter 标题为 Contact Us，news.md 的 Frontmatter 标题为 News，布局为 NewsLayout。
总结
至此，你应该已经学会了如何在 VuePress 中使用 vuepress-plugin-new 插件，以及插件的配置和使用。在实际开发中，使用插件能够大大提高开发效率，值得一试。
欢迎留言分享更多 VuePress 使用技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733e890c4f72775835d7