VuePress安装及使用

前言

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

例如：JavaFX 前言 这个博客网站就是使用 VuePress 生成的，你只需要使用 Markdown 来书写文章内容，其他的 VuePress 帮你搞定

VuePress 相比于其他以 Markdown 为中心的静态网站生成器，如 mdBook 、GitBook、Hexo、Nuxt、VitePress、Docsify 、Docute 更加简单方便，如果你会前端你还可以自己定制主题。

一、依赖环境

• 安装的 Node.js 版本需要大于等于 18.16.0
• 包管理器，如 npm 或者 pnpm、yarn 等。

若你还没安装 Node.js，可以参考 Node.js安装与配置 进行下载安装。

二、vuepress 安装和使用

1.初始化

新建一个文件夹，我这里新建的文件夹叫 vuepress ，打开 cmd 窗口进入 vuepress 文件夹所在路径。

然后 cmd 命令行中输入下面的命令，将初始化生成一个 package.json 文件：

npm init -y

2.将 VuePress 安装为本地依赖

npm install -D vuepress@next

3. package.json 中添加脚本

在 package.json 中的 scripts 里添加两行启动脚本

	"docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"

最终的 package.json 长这样：

{
  "name": "vuepress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^2.0.0-rc.0"
  }
}

4. 新建 docs 文件夹。

在 vuepress 文件夹下新建 docs 文件夹，用于存放所有的 Markdown 文件。

在 docs 文件夹下新建 README.md 文件，你可以在 README.md 写点内容。

5.启动

执行如下命令启动，启动成功后，会在 docs 下自动生成 .vuepress 文件夹，用于配置。

npm run docs:dev

启动后，你可以浏览器打开 http://localhost:8080/ 查看刚才的 README.md 渲染效果 。

下面是我 README.md 渲染效果