Svelte 学习平台
一个现代化的 Svelte 学习平台，包含基础教学和高级特性演示。
🌐 在线访问
- 静态站点：https://masondengcoder.github.io/svelte-study/
- GitHub 仓库：https://github.com/MasonDengCoder/svelte-study
🚀 快速开始
安装依赖
pnpm install
启动开发服务器
pnpm dev
构建生产版本
pnpm build
📚 完整文档
📖 查看完整文档
文档导航
- 🎯 项目概述 - 项目介绍和特性
- 🚀 快速开始 - 安装和运行指南
- 📁 项目结构 - 目录结构说明
- 📖 基础教学 - 从零开始学习 Svelte
- 🚀 高级特性 - 探索 Svelte 的强大功能
- 🧩 组件系统 - 统一布局组件使用指南
- 🧭 导航系统 - 完整的导航目录系统
- 🎬 演示项目 - 高级特性演示说明
- 🔧 开发规范 - 代码规范和最佳实践
- 🚨 故障排除 - 常见问题和解决方案
🎯 主要功能
基础教学 (Tutorials)
- Hello World: 第一个 Svelte 组件
- 响应式数据: 理解 Svelte 的响应式系统
- 条件渲染: 学习 if/else 条件
- 列表渲染: 掌握 each 循环
- 事件处理: 学习用户交互
高级特性 (Advanced)
- 自定义 Actions: 可复用的 DOM 操作
- 生命周期钩子: 组件生命周期管理
- 高级 Stores: 状态管理进阶
- 高级动画: 复杂的动画效果
- 状态机: 复杂状态管理
- 复合组件: 组件组合模式
🛠️ 技术栈
- 框架: Svelte 5
- 构建工具: Vite
- 包管理器: pnpm
- 语言: TypeScript
- 样式: CSS + Tailwind CSS
📖 学习路径
- 从基础教学开始: 如果你是 Svelte 新手，建议从基础教学开始
- 探索高级特性: 掌握基础后，可以尝试高级特性模块
- 查看组件源码: 学习组件的实现方式
- 实践练习: 尝试修改和扩展现有功能
🔧 开发指南
添加新功能
- 在
src/features/下创建新目录 - 实现相关组件和逻辑
- 在
src/pages/App.svelte中添加路由 - 更新导航菜单
添加共享组件
- 在
src/shared/components/下创建组件 - 在
src/shared/components/index.ts中导出 - 在需要的地方导入使用
📄 相关文档
🤝 贡献
欢迎提交 Issue 和 Pull Request！
📄 许可证
MIT License
开始你的 Svelte 学习之旅吧！ 🎉
📚 查看 完整文档 了解更多信息
