1.VitePress 简介

VitePress 官网:https://vitepress.dev VitePress 可以将 Markdown 文件生成静态 HTML 页面,常用于很少更改的信息性内容,例如产品页面、新闻文章、软件文档和博客。

生成的 HTML 页面为单页应用程序(SPA)。

2.快速开始

需要的环境:Node.js 18。

image.png

在 D 盘创建一个文件夹 vitepress。

image.png

使用命令提示符进入这个文件夹,执行命令。

npm add -D vitepress

image.png

image.png

执行完成后文件夹中下载了项目的依赖包。

image.png

设置 Vitepress,执行命令。

npx vitepress init

image.png

image.png

VitePress 应该在哪里初始化配置? 输入 docs 则初始化到 docs 目录下。

docs

image.png

网站名称暂时默认,直接回车。

image.png

网站描述暂时默认,直接回车。

image.png

模板暂时默认,直接回车。

image.png

是否使用TypeScript处理配置文件和主题文件? 按左右键选择 No。

image.png

将 VitePressnpm脚本添加到package.json? 选择 Yes。

image.png

创建完成。

image.png

目录下创建了 docs 目录,docs 目录下有默认模板创建的文件。

image.png

image.png

运行项目,执行命令。

npm run docs:dev

image.png

image.png

浏览器访问:http://localhost:5173/,VitePress 项目就创建成功了。

image.png