VuePress 是静态站点生成框架之一，界面简介优雅，本文记录使用方法。

简介 {#简介}

• VuePress 是尤雨溪（vue.js 框架作者）发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。
• VuePress 有很多优点：
  • 界面简洁优雅，不同于 Hexo，个人觉得更适合作为说明文档页
  • 容易上手（半小时能搭好整个项目）
  • 更好的兼容、扩展 Markdown 语法
  • 响应式布局，PC端、手机端
  • Google Analytics 集成
  • 支持 PWA
• 中文官网：https://vuepress.docschina.org/

安装 {#安装}

nodejs {#nodejs}

• VuePress 需要安装 Node.js，且版本要求 >= 8。

vuepress {#vuepress}

• 在 nodejs 平台下安装 vuepress

使用方法 {#使用方法}

创建框架 {#创建框架}

• 以 Cellink 项目的说明文档为例，创建 cellink-docs 文件夹

• 初始化项目

• 在 VueDemo 文件夹中创建 docs 文件夹，在其中加入 README.md 文件，写入 hello world!
• 在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：

• 添加 vue-template-compiler 模块

配置站点信息 {#配置站点信息}

• 在 config.js 文件中配置网站标题、描述、主题等信息

• 此时站点框架完成，已经可以进行初步测试，执行命令：

• 正常情况下 VuePress 会建立本地 Web 服务器，监听 http://localhost:8080/
• 访问 http://localhost:8080/

填充内容 {#填充内容}

• 按照导航配置的 link 我们分别创建文件夹和对应的 markdown 文件

• 如果需要图像资源，需要放在 public 文件夹下：

• 引用图片示例：

如果需要在 github 仓库中引用该图像，在前面加入仓库名称

示例效果 {#示例效果}

• 访问 http://localhost:8080/

• 这样一个说明文档站点就创建完成了

生成静态文件 {#生成静态文件}

• 部署时需要生成静态文件

• 得到静态文件后可以推送到服务器、Github Pages 等进行站点托管

示例工程 {#示例工程}

• 上述 cellink-docs 工程文档链接：https://github.com/zywvvd/cellink-docs/tree/source

参考资料 {#参考资料}

• https://vuepress.docschina.org/

• https://github.com/zywvvd/cellink-docs/tree/source

• https://blog.csdn.net/zhanghao143lina/article/details/120398301

文章链接：
https://www.zywvvd.com/notes/tools/vuepress/usage/