開發者指南

歡迎來到 SimNet 的開發者文件。SimNet 是一個純前端的網路模擬器（Network Simulator）模板（Template），讓開發者能以 Vue 3 + VitePress + Rust/WASM 為基礎，快速建構網路相關的互動式教學內容。

這份文件適合誰？

想要貢獻程式碼的開發者——無論是修正 bug、新增功能或改善 UI
想要理解系統運作方式的技術讀者——了解 WASM 引擎如何驅動模擬
想要以此模板建構自訂內容的內容創作者——為你的學習者設計專屬的網路情境

你將學到什麼

章節	內容
系統架構	技術棧（Tech Stack）總覽、元件（Component）階層、資料流（Data Flow）、目錄結構、主題系統與挑戰框架
如何擴充模板	從零開始建立一個新的情境——包含目錄結構、config YAML 格式、裝置設定、事件系統與 Flag 驗證
Build Runtime 相容性	支援的 Node 版本、系統 `wasm-pack` 必裝條件、canonical 驗證指令鏈、VitePress fallback 程序

快速上手

bash

# 1. Clone 專案
git clone https://github.com/<org>/network-sim.git
cd network-sim

# 2. 安裝依賴
pnpm install

# 3. 建置 WASM 引擎（需要 Rust + wasm-pack）
pnpm wasm:build

# 4. 啟動開發伺服器
pnpm dev

開發伺服器啟動後，瀏覽 http://localhost:5173/challenges/01-ethernet-basics/ 即可看到第一個範例情境的運作畫面。

前置需求

工具	最低版本	用途
Node.js	18+	前端建置工具鏈
pnpm	10+	套件管理器（Package Manager）
Rust	1.75+	編譯 simnet-engine
wasm-pack	0.12+	將 Rust 編譯為 WebAssembly

專案結構一覽

network-sim/
├── .vitepress/        # VitePress 設定與自訂主題
│   └── theme/         # Vue 元件、Composable、CSS
├── docs/              # 內容頁面（Markdown + 範例情境）
│   ├── challenges/    # 範例情境目錄
│   └── dev/           # 開發者文件（你正在閱讀的內容）
├── simnet-engine/     # Rust WASM 引擎
│   └── crates/        # Rust workspace crates
├── tests/             # 測試檔案
└── package.json       # 前端依賴與腳本

準備好了嗎？從系統架構開始深入了解整個系統吧。

開發者指南 ​

這份文件適合誰？ ​

你將學到什麼 ​

快速上手 ​