VitePress使用教程_vitepress中文官网

官网中文地址：VitePress中文网

安装

VitePress 可以单独使用，也可以安装到现有项目中。使用以下命令安装：

npm install -D vitepress

初始化

安装后，通过VitePress 附带命令行设置向导来构建基本项目。通过运行以下命令开始初始化：

 npx vitepress init

输入命令后会收到如下几个问题：

在哪初始化项目的配置目录？

Where should VitePress initialize the config? 

网站标题：

Site title: 

网站描述：

Site description: 

主题：

Theme: 

使用TypeScript?

Use TypeScript for config and theme files?

是否将VitePress npm脚本添加到package.json？

Add VitePress npm scripts to package.json? 

实际效果图：

初始化完成后，便可直接执行 npm run docs:dev 命令启动项目

文件结构

我们之前选择在 ./docs 中搭建 VitePress 项目，所以生成的文件结构会如下所示：

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

扩展默认主题

可以通过创建.vitepress/theme/index.js文件（"主题入口文件"）来启用自定义主题。

默认主题 CSS 可以通过覆盖根级 CSS 变量进行自定义。

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.less'
 
export default DefaultTheme

VitePress 对 CSS 预处理器有内置支持：.scss、.sass、.less， .styl 和 .stylus 文件。 不需要为它们安装 Vite 特定的插件，但必须安装相应的预处理器。

譬如我们选择less进行安装：

npm install -D less

/* .vitepress/theme/custom.less */
:root {
  --vp-layout-max-width: 1740px;
}
 
.VPDoc.has-aside .content-container {
  max-width: 100% !important;
}

最后，如果这篇文章对大家有所帮助的话，希望大家一键三连！红豆泥阿里嘎多！