🚀技术栈
现代化的 技术架构
精心挑选的技术栈，为现代Web开发提供最佳实践
⚛️
前端框架
🍃
Fresh
Deno的现代Web框架
⚛️
Preact
轻量级React替代方案
🏝️
Islands架构
最佳性能的渲染策略
🔷
TypeScript
类型安全的JavaScript
🎨
样式系统
🎨
TailwindCSS
原子化CSS框架
💅
Sass
CSS预处理器
🌈
CSS变量
动态主题支持
📱
响应式设计
移动端优先
🐻
状态管理
🐻
Zustand
轻量级状态管理
💾
持久化
自动本地存储
🔧
DevTools
开发调试支持
🛡️
TypeScript
完整类型支持
🛠️
开发工具
🦕
Deno
现代JavaScript运行时
🔥
热重载
快速开发体验
✅
ESLint
代码质量检查
✨
Prettier
代码格式化
✨核心特性
强大的 功能特性
为现代Web开发精心设计的功能集合
🎨
丰富的UI组件
包含按钮、卡片、输入框、模态框等常用组件，支持多种样式变体
多种变体
响应式设计
主题适配
易于定制
🔧
实用Hooks库
提供useLocalStorage、useDebounce、useFetch等实用hooks
性能优化
类型安全
易于使用
可组合
🌙
主题切换
支持亮色、暗色和系统主题，自动保存用户偏好
三种模式
自动保存
平滑切换
系统同步
📱
响应式设计
完美适配桌面端、平板和移动端设备
移动优先
断点系统
触摸友好
性能优化
⚡
高性能
基于Islands架构，实现最佳的加载性能和用户体验
Islands架构
按需加载
SSR优化
缓存策略
🔒
类型安全
全面的TypeScript支持，提供完整的类型检查和智能提示
完整类型
智能提示
编译检查
重构安全
📁 项目结构
清晰的目录结构，模块化的架构设计
📁athena/
├── 📁components/UI组件
├── ui/ # 基础UI组件
├── layout/ # 布局组件
└── auth/ # 认证组件
├── 📁hooks/自定义Hooks
├── 📁islands/交互组件
├── 📁routes/页面路由
├── 📁static/静态资源
├── 📁stores/状态管理
├── 📁styles/样式文件
├── base/ # 基础样式
├── components/ # 组件样式
├── utilities/ # 工具类
└── variables/ # 变量定义
├── 📁utils/工具函数
├── 📄deno.json# Deno配置
├── 📄fresh.config.ts# Fresh配置
└── 📄tailwind.config.ts# Tailwind配置
🧩
组件架构
模块化的组件设计，易于维护和扩展
UI组件库
布局组件
业务组件
认证组件
🏝️
Islands架构
客户端交互组件，实现最佳性能
按需加载
独立渲染
状态隔离
SEO友好
🎨
样式系统
模块化的样式管理，支持主题切换
Sass模块化
Tailwind原子化
主题变量
响应式设计
🐻
状态管理
轻量级状态管理，类型安全
Zustand集成
持久化存储
类型安全
开发工具
🚀 快速开始
三个步骤，快速启动你的开发之旅
STEP01
📥
克隆项目
从GitHub获取最新的项目代码
$git clone https://github.com/dext7r/athena.git
STEP02
📁
进入目录
切换到项目根目录
$cd athena
STEP03
🚀
启动服务
启动开发服务器，开始开发
$deno task start
#快速启动脚本
$git clone https://github.com/dext7r/athena.git
$cd athena
$deno task start
🦕
Deno运行时
v1.37+
现代化的JavaScript/TypeScript运行时
📦
Node.js (可选)
v18+
用于某些开发工具和依赖
🌐
现代浏览器
ES2020+
支持现代Web标准的浏览器