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

时间：2023-07-12 02:27:01 | 来源：网站运营

时间：2023-07-12 02:27:01 来源：网站运营

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

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

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

开始

1. 初始化目录及index.md

yarn inityarn 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 点击查看，这些功能只能通过本地页面查看，或者安装相应的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

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