Svelte 模板
技术栈
- Svelte 5.23.1
- TypeScript 5.7.2
- Vite 6.3.1
- Svelte SPA Router 4.0
- Svelte Use
- Page.js 1.11.6
项目结构
bash
templates/svelte/
├── src/
│ ├── api/ # API 接口
│ ├── assets/ # 静态资源
│ ├── config/ # 全局配置
│ │ ├── config.ts # 常量配置
│ │ └── request.ts # Axios 请求封装
│ ├── layouts/ # 布局组件
│ ├── pages/ # 页面组件
│ ├── routers/ # 路由配置
│ │ ├── modules/ # 路由模块
│ │ └── index.ts # 路由主文件
│ ├── stores/ # 状态管理
│ │ ├── modules/ # 状态模块
│ │ └── index.ts # 全局状态
│ ├── styles/ # 样式文件
│ ├── App.svelte # 根组件
│ └── main.ts # 入口文件特性
1. 开发体验
TypeScript 支持
- 完整的类型定义
- 智能提示
- 类型检查
- Svelte 专用类型配置
代码规范
- ESLint 配置
- Prettier 格式化
- StyleLint 样式检查
构建工具
- Vite 快速构建
- 热更新
- 按需加载
2. 路由系统
- Svelte SPA Router 配置
- 动态路由支持
- 路由守卫
- 路由懒加载
- 页面标题自动设置
- 路由错误处理
- 路由进度条
3. 状态管理
- Svelte Stores
- 响应式状态
- 派生状态
- 持久化存储
- TypeScript 支持
- 模块化管理
4. 请求封装
- Axios 增强
- Token 自动注入
- 统一错误处理
- 请求取消机制
- 401 自动处理
- 请求拦截器
- 响应拦截器
5. UI 功能
轻量级组件
- 自定义组件库
- 按需加载
- 主题定制
- 暗黑模式
UnoCSS 支持
- 原子化 CSS
- 自定义规则
- 主题变量
6. 工具集成
- Svelte Use
- 常用组合式函数
- 工具函数集合
- TypeScript 支持
7. 国际化
- 多语言支持
- 中英文切换
- 动态加载
- 全局配置
使用指南
安装依赖
bash
pnpm install开发命令
bash
# 开发环境
pnpm start
# 构建生产
pnpm build
# 预览生产
pnpm preview
# 类型检查
pnpm check
# ESLint 检查
pnpm lint:eslint
# 样式检查
pnpm lint:stylelint
# 代码格式化
pnpm lint:format开发建议
组件开发
- 使用 Svelte 5 语法
- 保持组件纯粹
- 使用 TypeScript 类型
- 遵循响应式原则
状态管理
- 使用 Svelte Stores
- 合理使用派生状态
- 按模块拆分状态
- 注意状态持久化
路由开发
- 使用路由懒加载
- 实现路由守卫
- 处理异常情况
- 管理路由元信息
样式开发
- 优先使用 UnoCSS
- 遵循 BEM 命名
- 使用 SCSS 变量
- 注意样式隔离
注意事项
版本兼容
- Svelte 5.23.1+
- Node.js 16+
- TypeScript 5.7.2+
- Vite 6.3.1+
开发规范
- 遵循 ESLint 规则
- 使用 Prettier 格式化
- 遵循 Git 提交规范
性能优化
- 使用组件懒加载
- 避免不必要的状态更新
- 合理使用派生状态
- 图片资源优化