VitePress是在Vite上构建的静态网站生成器
VitePress is VuePress little brother, built on top of vite.
开始- 初始化目录及index.md
yarn init
yarn add --dev vitepress
创建文件夹docs，新建index.md (docs/index.md)
- 添加这些脚本到 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 点击查看，这些功能只能通过本地页面查看，或者安装相应的PlantUML插件；
工具- markdown相关软件（vscode、dillinger、MaHua、MarkdownPad、Typora） 有很多，自己搜索一下markdown软件
- vscode, markdown文件编写
- nodejs，用于运行本地项目
- yarn，用于运行本地项目
出了使用markdown软件编辑markdow文件之外，还可以用vscode编辑；
下载地址：https://code.visualstudio.com/
下载完成之后，安装vscode，vscode安装完成之后，在打开vscdoe的请况下再安装以下插件，点击install即可： markdown插件：https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one markdown预览插件：https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
安装完成后，可以直接用vscode打开markdown文件，点击右键 “MPE打开侧边预览查看” 效果
2、nodejs下载地址：http://nodejs.cn/download/
安装直接下一步下一步即可； 安装完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
更多方法： https://yarn.bootcss.com/docs/install
如何本地开发以上安装完成后，通过命令行进入项目所在的目录： 执行以下方法：
# 使用 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,
}
当我们访问的页面是 http://localhost:3000/builder/project/ 时，左侧展示的菜单是（具体可以看createProject方法）
- 一级栏目 - 小米商城
- 二级栏目 - HTML
- 二级栏目 - CSS
- 二级栏目 - Javascript
当我们访问的页面是 http://localhost:3000/builder/deep/vue/ 时，左侧展示的菜单是（具体可以看createDeep方法）
- 一级栏目 - vue
- 二级栏目 - API
当以上都没有匹配本之后，最后会匹配http://localhost:3000/builder/相关的路由，然后按照root的方式展示：
- 一级栏目 - 指南
- 二级栏目 - 老师介绍
- 一级栏目 - 提升
- 二级栏目 - 打包
- 三级栏目 - Grunt
- 三级栏目 - Glup
谢谢大家，只能讲的这么多，再细也不太好讲了。具体要实际操作才能知道怎么用。
