开源一个 Nuxt 4 目录网站模板，功能完整，拿来即用！
🎯 前言
大家好，我是 Pub。
最近开源了一个项目 Nuxt Mkdirs ------ 一个基于 Nuxt 4 构建的目录网站模板。
🔗 GitHub: github.com/PBHAHAHA/Nu...
🌐 介绍页地址: nuxt-mkdirs.com
这个项目之前是作为付费模板在卖，但效果不太理想，索性开源出来，希望能帮到有需要的同学。
先放几张效果图：
🤔 为什么做这个？
目录网站（Directory Website）是一种很常见的网站类型：
- 🤖 AI 工具导航站
- 💻 独立开发者产品目录
- 📦 SaaS 产品收录站
- 🎨 设计资源导航
市面上的目录模板大多是 Next.js，Vue Nuxt 生态相对较少。
作为一个 Vue/Nuxt 开发者，我决定自己撸一个，顺便把常用的功能都集成进去。
🛠️ 技术栈
| 类别 | 技术 |
|---|---|
| 框架 | Nuxt 4 + Vue 3 |
| 样式 | TailwindCSS 4 + Radix Vue |
| CMS | Sanity（无头 CMS） |
| 认证 | Auth.js（Google/GitHub OAuth） |
| 支付 | Stripe + Creem |
| 邮件 | Resend |
| 部署 | NuxtHub（Cloudflare） |
为什么用 Sanity 而不是数据库？
可能有同学会问：为什么不用 MySQL/PostgreSQL？
Sanity 作为无头 CMS 的优势：
- ✅ 零数据库配置 - 不需要自己搭建和维护数据库
- ✅ 可视化后台 - Sanity Studio 开箱即用
- ✅ 免费额度充足 - 小型项目完全够用
- ✅ 自带图片 CDN - 不用操心图片存储
✨ 核心功能
1️⃣ 三种首页布局
提供了 3 种不同风格的首页，开箱即用：
bash
/ # 默认首页
/home2 # 布局二
/home3 # 布局三2️⃣ 完整的目录系统
- 分类 (Category) - 支持分组展示
- 标签 (Tag) - 多标签筛选
- 集合 (Collection) - 自定义产品集合
- 搜索 - 全文搜索
3️⃣ 用户系统
- Google / GitHub OAuth 一键登录
- 用户 Dashboard
- 个人设置
4️⃣ 内容提交 & 审核流程
用户提交 → 待审核 → 管理员审核 → 发布/拒绝用户可以提交产品，管理员在 Sanity Studio 后台审核。
5️⃣ 双支付系统
- Stripe - 国际支付
- Creem - 🇨🇳 国内友好，支持大陆身份证注册
💡 对于国内开发者，强烈推荐 Creem，注册简单，不需要公司资质。
6️⃣ 博客系统
内置博客功能，支持 Markdown，可以用来做 SEO 引流。
7️⃣ Newsletter 订阅
集成 Resend 邮件服务，支持：
- 邮件订阅
- 一键退订
- 订阅者管理
8️⃣ AI 集成（可选）
支持接入：
- Google AI (Gemini)
- DeepSeek
- OpenAI
可以用来自动生成产品描述、智能分类等。
📁 项目结构
csharp
nuxt-mkdirs/
├── app/
│ ├── components/ # 53+ 组件
│ ├── composables/ # 组合式函数
│ ├── layouts/ # 3 种布局
│ ├── pages/ # 30+ 页面
│ └── config/ # 站点配置
├── server/
│ ├── api/ # 38+ API 路由
│ └── utils/ # 服务端工具
├── sanity/
│ └── schemas/ # 16 个 Schema
└── public/ # 静态资源🚀 快速开始
bash
# 克隆项目
git clone https://github.com/PBHAHAHA/Nuxt_Mkdirs.git
cd Nuxt_Mkdirs
# 安装依赖
pnpm install
# 复制环境变量
cp .env.example .env
# 启动开发服务器
pnpm dev访问 http://localhost:3000 即可看到效果。
⚙️ 配置说明
Sanity CMS（必需）
bash
NUXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
NUXT_PUBLIC_SANITY_DATASET=production
NUXT_SANITY_API_TOKEN=your_api_tokenOAuth 认证（可选）
bash
# Google
NUXT_AUTH_GOOGLE_CLIENT_ID=xxx
NUXT_AUTH_GOOGLE_CLIENT_SECRET=xxx
# GitHub
NUXT_AUTH_GITHUB_CLIENT_ID=xxx
NUXT_AUTH_GITHUB_CLIENT_SECRET=xxx
# Secret（用 openssl rand -base64 32 生成）
NUXT_AUTH_SECRET=xxx邮件服务（可选）
bash
NUXT_RESEND_API_KEY=re_xxxxx
NUXT_RESEND_EMAIL_FROM=noreply@yourdomain.com支付（可选）
bash
# Stripe（国际）
NUXT_STRIPE_SECRET_KEY=sk_xxxxx
# Creem（国内推荐）
NUXT_CREEM_API_KEY=xxxxx🌐 一键部署
推荐使用 NuxtHub 部署到 Cloudflare：
bash
npx nuxthub deploy也支持 Vercel、Netlify 等平台。
📄 开源协议
MIT 协议，可以自由使用、修改、商用。
🙏 写在最后
这个项目前前后后花了不少时间，虽然作为付费模板没卖出去几份，但开源出来希望能帮到更多人。
如果这个项目对你有帮助：
- ⭐ Star 一下支持作者
- 🐛 发现 Bug 欢迎提 Issue
- 📢 分享给有需要的朋友
- 💬 有问题可以评论区交流
🔗 GitHub: github.com/PBHAHAHA/Nu...
也可以加我微信交流：w314709923x
如果觉得有帮助，别忘了点赞 👍 收藏 ⭐ 关注 ➕ 三连哦～