好用的文档神器——VuePress

前言

VuePress是一个基于Vue框架，并配合Markdown作为文档内容的静态文档型网站生成器。

使用VuePress不仅可以更加方便地进行文档编辑（比如自己软件的文档），也可以很方便地给新闻媒体，个人博主等很方便的构建静态网页，同时也可以编写教程，替代Typora编写自己的笔记。

点击这里可进入官方网站了解

使用VuePress的网站示例：

声明：这里部分网站使用的可能是VitePress而不是VuePress，至于两者区别，可参考VuePress的官方文档提供的信息。

VuePress的官方文档

VuePress自己的文档当然用VuePress，难不成还用GitBook？

Markdown 官方教程

Arch Linux 简明指南

Unity 基础教程

开始使用

创建文件夹目录

mkdir vuepress-starter
cd vuepress-starter # 可以将vuepress-starter替换成自己的名称

安装VuePress

NPM

git init
npm init

YARN

git init
yarn init

pnpm

git init
pnpm init

然后将VuePress安装为本地依赖：

NPM

npm install -D vuepress@next

YARN

yarn add -D vuepress@next

最后配置

打开package.json文件，添加scripts对象：

"scripts":{
    "docs:dev":"vupress dev docs",
    "docs:build":"vuepress build docs"
}

其中docs:dev和docs:build可以换成自己的自定义命令，不过，如果自己取名称的话，下面的命令也要更改

添加.gitignore(可选)

将默认的临时目录，缓存目录，node_modules添加进.gitignore，防止提交的时候添加到仓库上

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

开始写作

VuePress默认读取./docs目录，并将README.md或INDEX.md文件作为该目录的主页文件，比如：

假设网站地址是vuepress.amekiri.cn(只是举例，没有这个地址，麻烦搜索引擎不要爬取)

那./docs/README.md对应：

https://vuepress.amekiri.cn/

如果是./docs/press/README.md，则对应：

https://vuepress.amekiri.cn/press/

当然，文件名称也可以自定义。如果是./docs/press/page.md，则对应：

https://vuepress.amekiri.cn/press/page.html

使用VSCode打开并开始写作

进入项目目录，输入以下命令打开：

code ./

在VSCode新建一个docs目录，并新建一个README.md文件，在文件写入以下内容：

# Hello VuePress

There is a VuePress page !

最后在终端执行以下命令：

NPM

npm run docs:dev

YARN

yarn docs:dev

PNPM

pnpm docs:dev

如果没有任何错误，将会输出以下结果：

输入下面的地址即可打开项目