Nuxt 3 基础博客模板 – Bfotool Nuxtjs 基础博客（Vue 3 + TypeScript + Tailwind）

如果您正在寻找一款现代化的 Nuxt 3 博客模板，Bfotool Nuxtjs Base Blog是一个绝佳的选择。它是一款功能齐全的博客应用，采用Nuxt 3、Vue 3、TypeScript 和 Tailwind CSS构建，旨在帮助开发者快速搭建专业的博客，而无需在开发过程中构建后端。

该项目包含一个由 Axios 拦截器驱动的模拟 API 层，可以模拟真实的 REST API。这使其非常适合学习 Nuxt 架构、进行应用程序原型设计或构建可用于生产环境的博客平台。

您可以在这里浏览代码库：👉 https://github.com/bfotool/nuxtjs-base-blog

什么是 Bfotool Nuxtjs Base Blog？

Bfotool Nuxtjs Base Blog是一款采用最新前端技术构建的现代化博客应用模板。它提供完整的博客界面，包括文章、分类、搜索功能和联系页面。

该项目采用简洁的 Nuxt 3 架构设计，易于理解和扩展。

主要亮点包括：

完整的博客用户界面，采用响应式设计
用于开发且无需后端的模拟 REST API
基于现代 Vue 3 Composition API 构建
使用 TypeScript 进行类型安全开发
SEO 就绪的元配置
支持深色和浅色主题

代码库位于此处：

👉 https://github.com/bfotool/nuxtjs-base-blog

此模板非常适合用于：

个人博客
公司博客
开发者作品集
学习 Nuxt 3 架构
内容网站的快速原型设计

主要特点

C 类="ac-h3"完整博客页面

该模板包含博客平台通常需要的一套完整页面。

主要页面包括：

首页– 显示精选文章、分类筛选器和分页文章
博客文章页面– 查看包含目录和相关文章的完整文章
分类页面– 按分类浏览文章
搜索页面– 具有防抖功能的实时搜索
关于我们页面– 介绍您的团队、使命或品牌
联系页面– 带有验证和提示反馈的联系表单
错误页面– 自定义错误处理界面

这种结构为用户提供了即用型的博客体验。

< class="ac-h3"h3>用于开发的伪 API 层</ class="ac-h3">

该项目最强大的功能之一是模拟 API 系统。

该项目没有连接到真正的后端，而是使用Axios 拦截器模拟 API 响应。

这种方法允许开发人员：

构建前端功能，无需后端依赖。
测试分页、筛选和排序功能
模拟真实的API响应延迟
之后可以轻松切换到真正的后端。

模拟 API 包含以下端点：

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

由于 API 是通过useApi 可组合组件抽象出来的，因此切换到真正的后端只需要极少的配置。

现代 Nuxt 3 架构

该项目遵循Nuxt 3 推荐的开发模式，是开发人员学习该框架的绝佳参考资料。

重要的建筑特色包括：

自动导入的组件和可组合组件
TypeScript优先开发
可组合 API 服务层
模块化文件夹结构
SEO元配置
页面过渡

该应用程序还使用了：

useSeoMeta()SEO标签
useColorMode()用于主题切换
useRoute()以及其他内置的 Nuxt 可组合组件

< class="ac-h3"h3>深色模式和响应式设计</ class="ac-h3"h3>

该用户界面支持使用深色和浅色主题@nuxtjs/color-mode。

功能包括：

自动系统主题检测
手动主题切换
Tailwind CSS 样式
移动优先响应式布局

这样可以确保博客在以下平台上无缝运行：

桌面
片剂
移动设备

P class="ac-h3"强大的博客功能

该博客模板包含一些通常在正式博客平台中才会出现的高级功能。

其中包括：

由 Markdown 标题生成的目录
相关帖子推荐
预计阅读时间
类别筛选
去抖动全文搜索
智能分页
弹出式通知
正在加载骨架组件
动画页面过渡

这些功能为博客访客创造了现代化的阅读体验。

技术栈

该项目采用现代前端技术栈构建。

层	技术
框架	Nuxt 3.15
UI库	Vue 3.5
语言	TypeScript 5.7
造型	Tailwind CSS 3.4
国家管理	皮尼亚
HTTP客户端	Axios
图标	Iconify 通过 @nuxt/icon
主题	@nuxtjs/color-mode
绒毛	ESLint
格式化	更漂亮

该技术栈提供了高性能、可扩展性和可维护性。

项目结构概述

该代码库遵循清晰有序的结构。

重要目录包括：

页

该pages目录定义了主要路由：

index.vue首页
about.vue关于页面
contact.vue联系表格
search.vue搜索界面
blog/[slug].vue– 博客文章页面
blog/category/[slug].vue– 分类页面

Com class="ac-h3"组件

可重用的UI组件按逻辑类别分组：

layout– 页眉和页脚
common分页、骨架式加载器、弹出式通知
blog– 博客特有的组件，例如明信片和目录

组件类“ac-h3”可操作

可组合目录包含可重用的逻辑。

重要的可组合元素包括：

useApi()– 类型化 API 服务层
useDebounce()– 消除反应值抖动

< class="ac-h3"h3>模拟 API 层

模拟系统位于该mocks目录内。

它包含：

handlers.ts– API 请求拦截器
posts.ts– 博客文章示例
authors.ts作者数据
categories.ts– 类别数据

这种结构使得项目易于修改和扩展。

如何安装和运行项目

请按照以下步骤在本地运行项目。

先修课程“ac-h3”uisites

你需要：

Node.js 18.17 或更高版本
npm、yarn 或 pnpm

克隆仓库

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog

class="ac-h3"安装依赖项

npm install

启动开发服务器

npm run dev

然后打开浏览器，网址为：

http://localhost:3000

当文件发生更改时，Nuxt 开发服务器将自动重新加载。

从模拟 API 切换到真实 API

该项目中最出色的设计决策之一是便捷的 API 切换。

连接真正的后端：

设置环境变量：

NUXT_PUBLIC_USE_MOCK_API=false

配置您的 API 基本 URL：

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

请确保后端响应类型与以下定义相符：

types/index.ts

无需进行其他代码更改。

自定义博客

开发者可以轻松自定义模板。

更改主题或样式

编辑 Tailwind 配置：

tailwind.config.ts

全局样式位于：

assets/css/main.css

修改博客内容

模拟内容可在以下位置更新：

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts

这样可以让你快速构建不同博客数据集的原型。

更新应用设置

应用程序常量（例如导航、品牌标识和社交链接）存储在：

utils/constants.ts

为什么要使用这款 Nuxt 博客模板？

这个项目对于开发者来说是一个绝佳的选择，因为它提供了：

简洁的 Nuxt 3 架构
生产级代码结构
前端开发的模拟 API
使用 Tailwind CSS 实现现代 UI
适合搜索引擎优化的页面
轻松集成真实API

它既可以作为学习项目，也可以作为可直接投入生产的博客基础。

GitHub 仓库

您可以在这里查看完整源代码：👉 https://github.com/bfotool/nuxtjs-base-blog

如果您觉得这个项目有用，请考虑给仓库加星标并贡献改进意见。