【VitePress的使用】最简单且详细的教程

VitePress使用

官网地址：https://vitepress.dev/guide/getting-started

环境：

Node.js 版本 >=18

创建并进入一个目录

mkdir vitepress-test && cd vitepress-test

初始化

npm init -y

安装依赖

npm i vitepress -d

项目配置

npx vitepress init

根据提示选择配置

# md文档路径
Where should VitePress initialize the config?
  	./docs
# 文档标题，后续可以改
Site title:
 	 lab-element-plus
# 文档描述，后续可以改
Site description:
  	element-plus二次封装组件库
# VitePress主题，默认即可
Theme:
  Default Theme (Out of the box, good-looking docs)
  Default Theme + Customization
  Custom Theme
# 是否使用TypeScript，根据自己需求
Use TypeScript for config and theme files?
  Yes
  No
# 是否自动生成VitePress的命令到package.json，选择Yes
Add VitePress npm scripts to package.json?
  Yes
  No

package.json自动生成的命令如下

  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },

生成默认文件并运行项目

npm run docs:dev

运行命令后会自动生成默认配置文件和示例文件 及 运行项目

文件修改

docs/index.md
项目首页

docs/config.mjs
nav：顶部配置文字/链接…
sidebar：侧边栏配置文字/链接…

根据需求更改docs文件夹下的md文件