npm 包 vuepress 使用教程

VuePress 是一个基于 Vue.js 的静态网站生成器，它提供了一种轻松创建优美文档站点的方式。

安装

使用 npm 可以很容易地安装 VuePress：

npm install -g vuepress

创建站点

创建一个新的 VuePress 站点非常简单。在一个空文件夹中运行以下命令：

mkdir my-site
cd my-site
echo '# Hello VuePress!' > README.md
echo '```js\nconsole.log("Hello VuePress!")\n```' >> README.md

此时我们已经创建了一个最简单的 VuePress 站点。通过运行下面的命令来启动本地服务器：

vuepress dev .

现在你可以访问 http://localhost:8080 查看你的站点了。

配置

默认情况下，VuePress 会自动寻找并加载 .vuepress/config.js 文件，该文件应该导出一个 JavaScript 对象，用于配置站点。这个文件中包含了各种选项，比如标题、描述、主题、插件等等。

这里是一个简单的例子：

module.exports = {
  title: 'My Site',
  description: 'This is my site',
}

主题

VuePress 提供了多个主题供用户选择，也可以编写自己的主题。默认情况下，VuePress 使用的是内置主题。

要更改主题，请在 .vuepress/config.js 文件中修改 theme 选项：

module.exports = {
  theme: 'vuepress-theme-foo',
  // ...
}

内容

VuePress 使用 Markdown 来编写站点的内容。在 docs 目录下创建一个 Markdown 文件，它们将自动被转换为 HTML 页面，然后添加到站点导航栏中。

这里是一个示例目录结构：

.
├── README.md
└── docs
    ├── guide
    │   ├── README.md
    │   └── getting-started.md
    ├── config.md
    └── foo.md

部署

要将 VuePress 站点部署到线上服务器或者 GitHub Pages，我们可以使用以下命令构建静态文件：

vuepress build .

构建完成后，所有生成的文件都在 .vuepress/dist 目录下，可以通过任何 Web 服务器进行部署。

如果你想将你的站点托管到 GitHub Pages 上，只需按照以下步骤操作：

1. 在 GitHub 上创建一个新仓库；
2. 将生成的网站文件上传到仓库的 gh-pages 分支中；
3. 在仓库的设置页面中启用 GitHub Pages，并选择 gh-pages 分支作为发布来源。

结论

VuePress 是一个非常强大的静态网站生成器，它简化了文档站点的创建过程。通过本文提供的教程，你可以轻松地开始创建你自己的 VuePress 站点，并通过配置、主题、内容和部署使其更加完善。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47600