VitePress新一代建站工具，文档编辑工具，后端开发人员快速建站

VitePress是在Vite上构建的静态网站生成器

VitePress is VuePress little brother, built on top of vite.

开始

1. 初始化目录及index.md

yarn init
yarn add --dev vitepress           

创建文件夹docs，新建index.md (docs/index.md)

1. 添加这些脚本到 package.json

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

3、本地启动服务

yarn docs:dev
           

配置

没有配置，页面就很简单，用户没法导航。 在 docs 目录下创建 .vitepress 目录即可开始设置配置

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
└─ package.json           

.vitepress/config.js 是配置 VitePress 站的必要的文件，其将导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello VitePress',
  description: 'Just playing around.'
}           

项目越做越大时，配置需要抽出来，这里简单的举例说明一个大项目应该怎么配置菜单栏目；

config.js文件

引用不同的模块配置栏目项：

配置不同的菜单

统一链接到sideConfig 配置相应的展示项

前端再做不同的路由拦截展示不一样的菜单

具体说明：

从零开始：

使用文档

介绍

项目主要用markdown来编写教程，所有资源都是通过markdown输出内容；

目前支持的思维导图等请参考：，这些功能只能通过本地页面查看，或者安装相应的PlantUML插件；

工具

• markdown相关软件（vscode、dillinger、MaHua、MarkdownPad、Typora） 有很多，自己搜索一下markdown软件
• vscode, markdown文件编写
• nodejs，用于运行本地项目
• yarn，用于运行本地项目

安装

1、vscode

出了使用markdown软件编辑markdow文件之外，还可以用vscode编辑；

下载地址：

下载完成之后，安装vscode，vscode安装完成之后，在打开vscdoe的请况下再安装以下插件，点击install即可： markdown插件： markdown预览插件：

安装完成后，可以直接用vscode打开markdown文件，点击右键 “MPE打开侧边预览查看” 效果

2、nodejs

安装直接下一步下一步即可； 安装完nodejs后，进入命令窗口，不会的请直接搜索命令窗口怎么进； 输入

node --version           

版本号大于 v16 即可 再次输入

npm --version           

版本号大于 6 即可

3、yarn

必需安装完nodejs后，开始安装yarn；如果没有安装，请查看第2条安装nodejs方法；

安装yarh有多种方式，任意选择一种方式安装成功即可：

注意： 苹果电脑可能有的没有权限执行以下方法的时候要加一个sudo

方法一

npm install --global yarn           

苹果电脑

sudo npm install --global yarn           

安装后检查 通过如下命令测试 Yarn 是否安装成功：

yarn --version           

更多方法：

如何本地开发

以上安装完成后，通过命令行进入项目所在的目录： 执行以下方法：

# 使用 yarn
$ yarn install
​
# 启动开发服务器
$ yarn dev           

项目默认通跑起来了，直接本地浏览器访问命令行输出的地址即可；

目录结构

├── .vitepress/                          # 与项目构建相关的常用的配置选项；
│   ├── config.js                          # 主配置文件
│   ├── sideConfig/                         # 左侧配置文件
│   │    ├── subject/                         # 目前所有的配置文件都在这里，只要在这里配置
│   ├── theme-default                      # 默认配置    
├── product/                             # 产品 
├── builder/                             # 前端
├── ui/                                  # UI设计
├── php/                                 # PHP开发
├── JAVA/                                # java
├── test/                                # 测试
├── hr/                                  # HR
├── administration/                      # 行政
├── operate/                             # 运营
├── material/                              # 素材相关
├── service/                             # 服务内容
├── other/                               # 其它
├── public/                              # 纯静态资源，该目录下的文件不会被webpack处理，该目录会被拷贝到输出目录下；        
└── README.md                            # 项目信息文档           

配置文件说明

配置文件在.vitepress/sideConfig/subject 目录下面； 比如前端叫builder，后面要创建的目录都可以参考builder的创建方式； 所有分类如下：

产品：             /product/
前端：             /builder/
UI设计：           /ui/
PHP开发：          /php/
JAVA：             /java/
测试：             /test/
HR：               /hr/
行政：             /administration/
运营：             /operate/           

路由：所有页面地址访问都通过路由来生成； 比如我们访问的路由地址是

localhost:3000/builder/guide/stage/app.html           

对应的目录就是

/builder/guide/stage/app.md           

配置方式

每一个页面“ .vitepress/sideConfig/subject ”目录下都有一个createXXX方法，以builder举例：

// 全部
const root = [
  {
    text: '指南',
    children: [
      {
        text: '介绍',
        link: '/builder/guide/js',
      },
    ],
  },
  {
    text: '提升',
    children: [
      {
        text: '打包',
        //link: '/builder/work/',
        children: [
          {
            text: 'Grunt',
            link: '/builder/package/grount/',
          },
          {
            text: 'Glup',
            link: '/builder/package/glup/',
          },
        ],
      },
    ],
  },
];
// 项目
function createProject() {
  const root = [
    {
      text: '小米商城',
      children: [
        {
          text: 'HTML',
          link: '/builder/project/stage/html',
        },
        {
          text: 'CSS',
          link: '/builder/project/stage/css',
        },
        {
          text: 'JavaScript',
          link: '/builder/project/stage/js',
        },
      ],
    },
  ];
  return root;
}
// 深入
function createDeep() {
  const vue = [
    {
      text: 'vue',
      children: [
        {
          text: 'API',
          link: '/builder/deep/vue/api',
        },
      ],
    },
  ];
  return {
    '/builder/deep/vue/': vue,
  };
}
exports.createBuilder = function () {
  return {
    // 项目
    '/builder/project/': createProject(),
    // 深入
    ...createDeep(),
    // 前端
    '/builder/': root,
  };
};
           

这里的方法名称是：

createBuilder()           

格式是

{
  text: '父栏目名称',
  children: [
    {
      text: '子栏目名称',
      // 子栏目地址，对应的目录也是：/builder/deep/vue/api.md
      link: '/builder/deep/vue/api', 
    },
    {
      text: '子栏目名称1',
      // 子栏目地址，对应的目录也是：/builder/deep/vue/api/index.md
      link: '/builder/deep/vue/api/', 
    },
  ],
},
           

createBuider() 下面做了三个拦截路由的；

{
 // 当访问的是以 /builder/project/ 开头时，左侧显示的菜单
    '/builder/project/': createProject(),
    //  当访问是 '/builder/deep/vue/' 左侧显示的菜单
    ...createDeep(),
    // 前端 当以上都没有，且访问的是以 /builder 开头的是 root 显示的左侧菜单
    '/builder/': root,
}
           

当我们访问的页面是 时，左侧展示的菜单是（具体可以看createProject方法）

• 一级栏目 - 小米商城
• 二级栏目 - HTML
• 二级栏目 - CSS
• 二级栏目 - JavaScript

当我们访问的页面是 时，左侧展示的菜单是（具体可以看createDeep方法）

• 一级栏目 - vue
• 二级栏目 - API

当以上都没有匹配本之后，最后会匹配相关的路由，然后按照root的方式展示：

• 一级栏目 - 指南
• 二级栏目 - 老师介绍

• 一级栏目 - 提升
• 二级栏目 - 打包
• 三级栏目 - Grunt
• 三级栏目 - Glup

谢谢大家，只能讲的这么多，再细也不太好讲了。具体要实际操作才能知道怎么用。