logo
0
0
WeChat Login

Nuxt 4 博客

这是一个基于 Nuxt 4 和 Vue 3 构建的现代化博客应用。

功能特性

  • 🏠 首页 - 介绍博客和功能特性
  • 📝 文章页 - 文章列表和文章详情页
  • 📱 响应式设计 - 适配各种设备
  • 快速加载 - 基于 Nuxt 4 的性能优化
  • 🎨 现代化 UI - 使用 Tailwind CSS

技术栈

  • 框架: Nuxt 4
  • 前端: Vue 3
  • 样式: Tailwind CSS
  • 内容: @nuxt/content
  • 图片: @nuxt/image

开始使用

安装依赖

npm install

开发模式

npm run dev

构建生产版本

npm run build

预览生产版本

npm run preview

项目结构

├── assets/
│   └── css/
│       └── main.css
├── layouts/
│   └── default.vue
├── pages/
│   ├── index.vue          # 首页
│   └── posts/
│       ├── index.vue      # 文章列表页
│       └── [slug].vue     # 文章详情页
├── app.vue
├── nuxt.config.ts
├── tailwind.config.js
└── package.json

页面说明

首页 (/)

  • 博客介绍和欢迎信息
  • 功能特性展示
  • 关于博客的详细信息

文章列表页 (/posts)

  • 显示所有博客文章
  • 当前为空状态,等待内容添加

文章详情页 (/posts/[slug])

  • 显示单篇文章内容
  • 当前为占位页面,等待内容添加

开发说明

这个博客应用目前处于初始阶段,文章页面暂时无内容。后续可以:

  1. 添加 Markdown 格式的文章内容
  2. 集成内容管理系统
  3. 添加评论功能
  4. 实现搜索功能
  5. 添加标签和分类

许可证

MIT

About

个人博客

Language
JavaScript94.1%
Vue5.2%
Shell0.4%
TypeScript0.2%
Others0.1%