网站搭建工具（VitePress新一代建站工具）

VitePress是在Vite上构建的静态网站生成器VitePress is VuePress little brother, built on top of vite.开始初始化目录及index.mdyarn 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，用于运行本地项目安装1、vscode出了使用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谢谢大家，只能讲的这么多，再细也不太好讲了。具体要实际操作才能知道怎么用。