📖 项目介绍
Yunyuan
Template
一个现代化的 全栈开发模板， 集成了最新的技术栈和最佳实践，为开发者提供完整的 项目基础架构 和丰富的组件库
🚀 技术栈
前端框架
- • Fresh - Deno的现代Web框架
- • Preact - 轻量级React替代方案
- • Islands架构 - 最佳性能的渲染策略
- • TypeScript - 类型安全的JavaScript
样式系统
- • TailwindCSS - 原子化CSS框架
- • Sass - CSS预处理器
- • CSS变量 - 动态主题支持
- • 响应式设计 - 移动端优先
状态管理
- • Zustand - 轻量级状态管理
- • 持久化 - 自动本地存储
- • DevTools - 开发调试支持
- • TypeScript - 完整类型支持
开发工具
- • Deno - 现代JavaScript运行时
- • 热重载 - 快速开发体验
- • ESLint - 代码质量检查
- • Prettier - 代码格式化
✨ 核心特性
🎨
丰富的UI组件
包含按钮、卡片、输入框、模态框等常用组件，支持多种样式变体
🔧
实用Hooks库
提供useLocalStorage、useDebounce、useFetch等实用hooks
🌙
主题切换
支持亮色、暗色和系统主题，自动保存用户偏好
📱
响应式设计
完美适配桌面端、平板和移动端设备
⚡
高性能
基于Islands架构，实现最佳的加载性能和用户体验
🔒
类型安全
全面的TypeScript支持，提供完整的类型检查和智能提示
📁 项目结构
Yunyuan/ ├── components/ # UI组件 │ ├── ui/ # 基础UI组件 │ ├── layout/ # 布局组件 │ └── forms/ # 表单组件 ├── hooks/ # 自定义Hooks ├── islands/ # 客户端交互组件 ├── routes/ # 页面路由 ├── static/ # 静态资源 ├── stores/ # Zustand状态管理 ├── styles/ # Sass样式 │ ├── base/ # 基础样式 │ ├── components/ # 组件样式 │ ├── utilities/ # 工具类 │ └── variables/ # 变量定义 ├── types/ # TypeScript类型 ├── utils/ # 工具函数 ├── deno.json # Deno配置 ├── fresh.config.ts # Fresh配置 └── tailwind.config.ts # TailwindCSS配置