VitePress 初體驗 | 點燈坊

VitePress 是以 Vue 3 與 Vite 為基礎 SSG，可快速建立以 Markdown 為基礎的 JAMstack。

Version

VitePress 1.0.0

Create VitePress Project

$ mkdir vitepress-lab
$ cd vitepress-lab
$ npm add -D vitepress

• 建立 VitePress 專案目錄：vitepress-lab
• 在 vitepress-lab 目錄下安裝 vitepress package

Initial Configuration

$ npx vitepress init

• 對 config.mjs 做基本設定

Where should VitePress initialize the config?
│  ./_

• 以 目前目錄 為 VitePress 專案 根目錄

Site title:
│  My Awesome Project

• 設定專案 title

Site description:
│  A VitePress Site

• 設定專案描述

Theme:
│  ○ Default Theme
│  ● Default Theme + Customization (Add custom CSS and layout slots)
│  ○ Custom Theme

• 設定專案型態：Default Theme + Customization

Use TypeScript for config and theme files?
│  ○ Yes / ● No

• 使用 TypeScript：No

Add VitePress npm scripts to package.json?
│  ● Yes / ○ No

• 在 package.json 使用 VitePress：Yes

NPM Script

package.json

{
  "devDependencies": {
    "vitepress": "^1.0.0-rc.10"
  },
  "scripts": {
    "dev": "vitepress dev",
    "build": "vitepress build",
    "preview": "vitepress preview"
  }
}

• dev：執行 VitePress 開發模式
• build：編譯 VitePress
• preview：預覽編譯過的 VitePress

Developement Mode

$ npm run dev

• 啟動開發模式

Production Mode

$ npm run build
$ npm run preview

• 編譯 VitePress
• 預覽 VitePress

Conclusion

• VitePress 已經提供基本 CLI，可快速對 VitePress 建立基本設定於 config.mjs