# web-spa-demo

**Repository Path**: bzm121/web-spa-demo

## Basic Information

- **Project Name**: web-spa-demo
- **Description**: 原生 JS 单页应用演示：零框架、零打包、零编译的 SPA 参考实现，含路由/组件/状态管理
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-09
- **Last Updated**: 2026-10-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web-spa-demo

> 纯原生 JavaScript 单页应用（SPA）演示，零框架、零打包工具、零编译流程。

用最朴素的 `vanilla JS` 实现一个具有组件化结构、页面路由、状态管理的 SPA。**不依赖 React / Vue / Webpack / Vite**，仅用浏览器原生 API。适合教学或作为"极简前端工程"的参考。

## ✨ 核心特性

- 🚫 **零框架** — 无 React / Vue / Angular / Svelte
- 🚫 **零打包** — 无 Webpack / Vite / Rollup / Parcel
- 🚫 **零编译** — 无 TypeScript / Babel / SWC
- 🧩 **组件化** — `components/` 目录下放可复用 UI 单元
- 📄 **页面路由** — `pages/` 目录 + hash 路由切换
- 🧠 **状态管理** — `core/` 目录提供简易发布/订阅
- 📝 **可直接双击运行** — 用浏览器打开 `demo.html` 或 `index.html` 即可

## 📁 目录结构

```
web-spa-demo/
├── index.html             # 入口 HTML（含导航）
├── demo.html              # 演示页（独立 demo）
├── front.js               # 前端入口脚本（路由 + 启动）
├── run.bat                # Windows 一键启动脚本
├── app/
│   ├── components/        # 可复用组件
│   ├── core/              # 核心模块（状态/事件/工具）
│   └── pages/             # 页面组件
└── README.md
```

## 🚀 快速开始

### 方式 A：直接打开

```bash
# Windows
双击 index.html

# macOS
open index.html

# Linux
xdg-open index.html
```

### 方式 B：本地静态服务器

```bash
# 启动 Python 内置服务器
python -m http.server 8123 --bind 127.0.0.1
```

然后访问 <http://127.0.0.1:8123/>

### 方式 C：使用 run.bat

```bash
# Windows 下双击 run.bat 自动启动并打开浏览器
```

## 🛠️ 适用场景

- 🎓 前端入门教学：理解 SPA 本质（无框架黑盒）
- ⚡ 极简原型：快速搭一个可演示的页面
- 🔒 离线工具：不需要任何 CDN/依赖

## 📜 许可证

## 📜 许可证 / License

本项目基于 **Apache License 2.0** 开源 — 详见 [LICENSE](LICENSE) 与 [NOTICE](NOTICE)。

Copyright 2026 白志明 (Bai Zhiming)