HTML技术学习笔记

个人技术笔记网页，记录和分享前端开发、HTML/CSS 学习心得及相关技术文档

📖 项目简介

这是一个基于 React + TypeScript + Vite 构建的前端技术学习笔记网站，用于记录和分享前端开发过程中的学习心得、技术文档和实践经验。

✨ 特性

• 📝 笔记管理与展示
• 🎨 基于 shadcn/ui 的现代化 UI 设计
• 🌓 支持明暗主题切换
• 📱 完全响应式设计
• ⚡ Vite 提供极速的开发体验
• 🎯 TypeScript 保障代码质量

🛠️ 技术栈

• 框架: React 18
• 语言: TypeScript
• 构建工具: Vite
• UI 组件: shadcn/ui
• 样式: Tailwind CSS
• 路由: React Router
• 状态管理: TanStack Query
• 表单: React Hook Form + Zod
• 主题: next-themes

🚀 快速开始

环境要求

• Node.js >= 18
• npm >= 9

安装

# 克隆仓库
git clone https://github.com/chao5go/htmls-dev-notes.git

# 进入项目目录
cd htmls-dev-notes

# 安装依赖
npm install

开发

# 启动开发服务器
npm run dev

访问 http://localhost:5173 查看项目

构建

# 生产环境构建
npm run build

# 预览构建结果
npm run preview

📁 项目结构

htmls-dev-notes/
├── public/          # 静态资源
├── src/
│   ├── components/  # React 组件
│   ├── pages/       # 页面组件
│   ├── hooks/       # 自定义 Hooks
│   ├── lib/         # 工具函数
│   ├── styles/      # 样式文件
│   └── main.tsx     # 应用入口
├── index.html       # HTML 模板
└── vite.config.ts   # Vite 配置

🎨 图标

项目使用代码风格的图标设计，支持多种尺寸以适配不同设备和场景。

图标生成脚本位于 scripts/ 目录，可以重新生成不同尺寸的图标。

📄 许可证

MIT License

👤 作者

chao5go

🌐 在线访问

justhtmls.com