所以我說那個畫面呢？

畢竟是網頁，還是應該先來個網頁才能夠有畫面嘛。( ´ ▽ ` )ﾉ

鱈魚：「讓我們從頭開始建立網頁吧！ˋ( ° ▽、° ) 」

路人：（轉身離開）

鱈魚：「客官別急著走啊！只要一個命令網頁就變出來了呀！(っ´Ι`)っ」

對的，你沒聽錯，VitePress 只要一個命令就可以變出網頁了！◝(≧∀≦)◟

首先準備一個包含 Vue 3 + TypeScript 的普通開發環境，由於只要開發元件，所以 store、router 那些都不需要。

主要檔案與資料夾結構如下：

.
├─ package.json
└─ src
   ├─ components
   ├─ composables
   └─ types

• components：元件
• composables：提供給元件重複使用 API
• types：基礎型別或工具型別

（詳細內容見初始環境）

是不是變得很單純啊。◝( •ω• )◟

現在讓我們準備開始開發，本系列文章使用 VSCode 開發，配合 Vue - Official 外掛提供程式碼提示與格式化。

第一步來安裝 VitePress，執行以下命令：

npm add -D vitepress

接著執行初始化精靈：

npx vitepress init

初始化精靈會連續提問幾個問題，設定如下：

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  酷酷的元件
│
◇  Site description:
│  打造各種奇怪的元件
│
◇  Theme:
│  ○ Default Theme (Out of the box, good-looking docs)
│  ● Default Theme + Customization
│  ○ Custom Theme
│  
◇  Use TypeScript for config and theme files?
│  Yes
│  
◇  Add VitePress npm scripts to package.json?
│  Yes
└

執行完成後，會發現新增了 docs 目錄與其檔案。

.
└─ docs
   ├─ .vitepress
   │  ├─ theme
   │  └─ config.mts
   ├─ api-examples.md
   ├─ markdown-examples.md
   └─ index.md

最後讓我們執行開發命令：

npm run docs:dev

打開瀏覽器，在網址列輸入 http://localhost:5173，沒意外的話應該會出現以下畫面。

恭喜您！我們成功變出網頁了！✧*｡٩(ˊᗜˋ*)و✧*｡

是不是非常簡單快速啊？( ´ ▽ ` )ﾉ

完成基本內容

現在讓我們完成網頁基本內容吧。( ´ ▽ ` )ﾉ

VitePress 的設計理念為「以內容為中心」，只要使用 Markdown 格式撰寫內容，會自動根據檔案結構與檔案名稱，自動產生對應 route 的網頁。

意思就是如果你有以下檔案：

.
└─ docs        
   ├─ index.md
   ├─ getting-started.md
   └─ guide
      ├─ index.md
      └─ getting-started.md

VitePress 會自動產生以下網頁：

docs/index.md                 -->  /index.html (accessible as /)
docs/getting-started.md       -->  /getting-started.html
docs/guide/index.md           -->  /guide/index.html (accessible as /guide/)
docs/guide/getting-started.md -->  /guide/getting-started.html

是不是很方便！◝( •ω• )◟

現在讓我們完成基本內容，預期有以下頁面：

.
└─ docs        
   ├─ components
   │  └─ index.md  // 元件首頁，用來介紹所有元件
   ├─ origin.md    // 緣起，介紹專案起源
   └─ index.md     // 首頁

第一步當然是首頁內容。

docs/index.md

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "酷酷的元件"
  tagline: "打造各種奇怪的元件"
  actions:
    - theme: brand
      text: 前言
      link: /origin

    - theme: alt
      text: 元件清單
      link: /components/

features:
  - title: 你的期望
    details: 輸入你對此系列的期望
    icon: '✨'
---

沒意外的首頁會變成如下圖：

features 可以自由新增內容，加入更多個人特色吧！( •̀ ω •́ )✧

接下來是源起，也就是前言的部分。

docs/origin.md

# 緣起

源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。

簡單來說就是設計奇奇怪怪的元件。

別看這些介面好像很沒用，實作起來反而更難啊！ᕕ( ﾟ ∀。)ᕗ

::: tip
詳細內容可以看看這裡：[最糟糕音量控制設計大賽](https://www.inside.com.tw/article/9591-reddit-volume-slider)
:::

為了實現各類奇奇怪怪的需求，我們會結合各類知識或技術，從最基礎的三角函數、座標轉換，到物理引擎、Shader 等等。

大家如果有興趣的話，就和鱈魚一起來挑戰看看吧！(๑•̀ㅂ•́)و✧

最後是元件清單。

docs/components/index.md

<script setup>
</script>

# 元件清單

帶您快速認識所有元件。(≖‿ゝ≖)✧

目前內容很少，畢竟一個元件都沒有嘛。(́⊙◞౪◟⊙‵)

你會發現有一個熟悉的 script 標籤，對你沒看錯，那個標籤與 Vue SFC 裡面的 script 是同一個概念。( ´ ▽ ` )ﾉ

VitePress 可以在 Markdown 中使用 Vue 的語法，甚至可以引入 Vue 元件。因為如此，其客製化彈性很高，展示程式非常方便。◝(≧∀≦)◟

以上我們成功建立一個網頁了，是不是簡單又快速啊？(/≧▽≦)/

這便是 VitePress 的優點，可以讓我們專注於元件、模組等等主體開發，所以 VitePress 非常適合用來建立文件網頁。

接下來讓我們進入元件開發的部分吧！✧*｡٩(ˊᗜˋ*)و✧*｡

總結

• 認識 VitePress
• 使用 VitePress 建立一個網頁

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D02