Blog Home Nuxt 是一个基于现代前端技术栈构建的个人博客系统，采用 Nuxt3 框架开发，提供完整的博客功能和丰富的工具集合。项目具有优秀的用户体验、现代化的UI设计和强大的功能扩展性。

• 响应式布局：完美适配桌面端和移动端
• 优雅动画：流畅的页面过渡和交互动画
• 主题切换：支持明暗主题模式切换
• UI组件库：基于 DaisyUI 和 TailwindCSS 的现代化组件

• 文章管理：支持 Markdown 编辑和预览
• 分类标签：完整的文章分类和标签系统
• 评论系统：支持文章评论和回复功能
• 搜索功能：全文搜索和标签筛选
• 归档系统：按时间归档文章

• 代码生成器：条形码、二维码生成
• 图片处理：图片滤镜、批量处理、导出功能
• 加密工具：RSA、SM2/SM3/SM4 国密算法
• 音视频工具：音频可视化、WebRTC 视频聊天
• 文件处理：PDF 查看、文件上传切片
• AI 工具：集成 AI 对话功能
• 开发工具：截图、延迟测试、UniApp 测试

• SSR/SSG：支持服务端渲染和静态生成
• SEO 优化：自动生成 sitemap，优化搜索引擎收录
• 性能优化：图片懒加载、代码分割、缓存策略
• 开发体验：热重载、TypeScript 支持、ESLint 规范

• Nuxt3 - Vue.js 全栈框架
• Vue3 - 渐进式 JavaScript 框架
• TypeScript - 类型安全的 JavaScript

• TailwindCSS - 实用优先的 CSS 框架
• DaisyUI - Tailwind CSS 组件库
• Less - CSS 预处理器

• Pinia - Vue 状态管理库

• VueUse - Vue 组合式 API 工具集
• Day.js - 轻量级日期处理库
• CryptoJS - 加密算法库

• ESLint - 代码质量检查
• Prettier - 代码格式化
• Husky - Git hooks 工具
• Commitlint - 提交信息规范

blog-home-nuxt/
├── api/                    # API 接口定义
├── app.vue                 # 应用入口
├── assets/                 # 静态资源
│   ├── css/               # 样式文件
│   ├── font/              # 字体文件
│   ├── icons/             # 图标资源
│   └── images/            # 图片资源
├── components/            # 组件库
│   ├── base/             # 基础组件
│   └── xia/              # 自定义组件
├── composables/           # 组合式函数
├── config/               # 配置文件
├── layouts/              # 布局组件
├── middleware/           # 中间件
├── modules/              # Nuxt 模块
├── pages/                # 页面文件
│   ├── about/           # 关于页面
│   ├── archives/        # 归档页面
│   ├── detail/          # 文章详情
│   ├── photos/          # 相册页面
│   ├── projects/        # 项目页面
│   ├── tool/            # 工具页面
│   └── user/            # 用户页面
├── plugins/              # 插件
├── public/               # 公共资源
├── stores/               # 状态管理
├── styles/               # 全局样式
├── types/                # TypeScript 类型定义
└── utils/                # 工具函数

• Node.js >= 18.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0

# 使用 yarn（推荐）
yarn install

# 或使用 npm
npm install

# 启动开发服务器
yarn dev

# 或指定 IP 访问（局域网）
yarn dev:ip

访问 http://localhost:5050 查看效果

# 构建生产版本
yarn build

# 预览生产版本
yarn preview

# 生成静态文件
yarn generate

# 代码检查
yarn lint

# 自动修复
yarn lint:fix

# 代码格式化
yarn prettier

# 构建 Docker 镜像
docker build -t blog-home-nuxt .

# 运行容器
docker run -p 3000:3000 blog-home-nuxt

# 生产环境
yarn pm2:prod

# 开发环境
yarn pm2:dev

• 官方网站: https://jiang-xia.top/

• Nuxt3 官方文档
• Vue3 官方文档
• TailwindCSS 文档
• DaisyUI 文档

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

本项目基于 MIT 协议开源。

jiang-xia

• 个人网站: https://jiang-xia.top/
• GitHub: @jiang-xia

如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！