咖喱酱
主 题

Blog Home Nuxt

基于 Nuxt3 + Vue3 + TypeScript + TailwindCSS 的现代化个人博客系统

license
Nuxt
Vue
TypeScript
TailwindCSS

📖 项目简介

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

样式与UI

状态管理

  • Pinia - Vue 状态管理库

工具库

开发工具

📁 项目结构

复制代码 
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

安装依赖

bash 复制代码 
# 使用 yarn（推荐）
yarn install

# 或使用 npm
npm install

开发环境

bash 复制代码 
# 启动开发服务器
yarn dev

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

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

生产构建

bash 复制代码 
# 构建生产版本
yarn build

# 预览生产版本
yarn preview

# 生成静态文件
yarn generate

代码规范

bash 复制代码 
# 代码检查
yarn lint

# 自动修复
yarn lint:fix

# 代码格式化
yarn prettier

📦 部署

Docker 部署

bash 复制代码 
# 构建 Docker 镜像
docker build -t blog-home-nuxt .

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

PM2 部署

bash 复制代码 
# 生产环境
yarn pm2:prod

# 开发环境
yarn pm2:dev

🌐 在线预览

📚 相关文档

🤝 贡献指南

  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 协议开源。

⭐ Star History

Star History Chart

👨‍💻 作者

jiang-xia

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

全部评论(0)