软件界面介绍

1.导航栏

2.文档工具栏

3.文档目录树

4.文档编辑器区域

5.当前文档的基本配置

新建项目

点击“文档工具栏-添加图标-新建项目”

点击后弹出如图所示界面：

1.项目名称（也是项目的文件夹名称，推荐使用英文）

2.项目的描述

3.选择项目存放的目录（最终项目目录：选择的目录+项目名称）

项目创建完成以后会自动打开新创建的项目，此时便可以开始进行文档操作，如下图所示：

其中红框部分是当前打开文档的基础配置，每个文档都会有该配置。

在线预览

1.进入项目根目录安装依赖和运行项目

# 进入到项目根目录，注意不是原目录
npm install
npm run dosc:dev

浏览器访问：http://localhost:5173即可实现在线预览，不出意外的话您将看到如下的假面

# 编辑完成后构建命令如下
npm run dosc:build

小技巧:可以通过工具栏的文件夹图标进入项目的根目录

导航配置

按照如下所示可以编辑网站的顶部导航

文档管理

新建文档

1.在根目录下新建文档如下图所示：

2.在指定的文件夹下新建文档：右键文件夹-新建文档

文档基础配置

如上图所示，可以对文档进行单独的配置。

下面是特别说明的字段：

大纲显示级别：当为0时不显示大纲，为3时可显示到三级大纲

文档是主页

若要前编辑的文档是主页，可点击右侧的“主页”tab,将页面类型选择为“主页”。

并对该主页的基本信息和features进行配置

文档代码

在 VitePress 中，每个 Markdown 文件都被编译成 HTML，而且将其作为vue单文件组件处理。这意味着可以在 Markdown 中使用任何 Vue 功能，包括动态模板、使用 Vue 组件或通过添加 <script> 标签为页面的 Vue 组件添加逻辑

代码指的是文档的script和style标签的代码，程序会自动识别这两个标签的代码并填充到代码区域（整个文档不允许有多个script或style标签，如果存在解析时可能会发生意外）