VitePress新一代建站工具，文檔編輯工具，適合前后端開發(fā)人員快速建站

時間：2023-07-12 02:27:01 | 來源：網(wǎng)站運營

時間：2023-07-12 02:27:01 來源：網(wǎng)站運營

VitePress新一代建站工具，文檔編輯工具，適合前后端開發(fā)人員快速建站：

VitePress是在Vite上構建的靜態(tài)網(wǎng)站生成器

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

開始

1. 初始化目錄及index.md

yarn inityarn add --dev vitepress創(chuàng)建文件夾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 目錄下創(chuàng)建 .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文件

引用不同的模塊配置欄目項：

配置不同的菜單

統(tǒng)一鏈接到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有多種方式，任意選擇一種方式安裝成功即可：

注意： 蘋果電腦可能有的沒有權限執(zhí)行以下方法的時候要加一個sudo

方法一

npm install --global yarn蘋果電腦

sudo npm install --global yarn安裝后檢查 通過如下命令測試 Yarn 是否安裝成功：

yarn --version更多方法： https://yarn.bootcss.com/docs/install

如何本地開發(fā)

以上安裝完成后，通過命令行進入項目所在的目錄： 執(zhí)行以下方法：

?# 使用 yarn$ yarn install?# 啟動開發(fā)服務器$ yarn dev項目默認通跑起來了，直接本地瀏覽器訪問命令行輸出的地址即可；

目錄結構

├── .vitepress/ # 與項目構建相關的常用的配置選項；│ ├── config.js # 主配置文件│ ├── sideConfig/ # 左側配置文件│ │ ├── subject/ # 目前所有的配置文件都在這里，只要在這里配置│ ├── theme-default # 默認配置 ├── product/ # 產(chǎn)品 ├── builder/ # 前端├── ui/ # UI設計├── php/ # PHP開發(fā)├── JAVA/ # java├── test/ # 測試├── hr/ # HR├── administration/ # 行政├── operate/ # 運營├── material/ # 素材相關├── service/ # 服務內容├── other/ # 其它├── public/ # 純靜態(tài)資源，該目錄下的文件不會被webpack處理，該目錄會被拷貝到輸出目錄下； └── README.md # 項目信息文檔

配置文件說明

配置文件在.vitepress/sideConfig/subject 目錄下面； 比如前端叫builder，后面要創(chuàng)建的目錄都可以參考builder的創(chuàng)建方式； 所有分類如下：

產(chǎn)品： /product/前端： /builder/UI設計： /ui/PHP開發(fā)： /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

謝謝大家，只能講的這么多，再細也不太好講了。具體要實際操作才能知道怎么用。