Day 5：03. 基于Nuxt开发博客项目-页面结构组织

一、前言

接下来我将从项目目录规划入手，逐步讲解布局系统、页面路由、组件化设计等核心概念。我会先大致完成一个博客的基本功能，后续去优化它的界面。

这个是我的示例站点，在这里可以看到我目前的进度，www.csyblog.cn/

本文涉及的所有文档官方地址：
nuxt官网：nuxt.com/
tailwindcss官网：tailwindcss.com/
daisyui官网：daisyui.com/

二、最小配置和目录结构

这里我先列出我项目目录结构，大致可以了解一下，可供参考。随着项目的迭代，这个结构也会有一些调整

csharp 复制代码

csyblog-nuxt4                      
├─ app                             
│  ├─ assets                       
│  │  └─ css                       
│  │     └─ main.css        	# 全局样式配置        
│  ├─ components                   
│  │  ├─ common                    
│  │  │  ├─ AppFooter.vue      	  # 头部组件     
│  │  │  ├─ AppHeader.vue        # 底部组件     
│  │  │  └─ AppSidebar.vue       # 侧边栏组件  
│  │  └─ ui                        
│  │     └─ bg-falling-stars       
│  │        ├─ FallingStarsBg.vue  # UI组件
│  │        └─ index.ts            
│  ├─ layouts                      
│  │  └─ default.vue             # 默认布局          
│  ├─ lib                          
│  │  └─ utils.ts                  
│  ├─ pages                        
│  │  ├─ blog                      
│  │  │  ├─ index.vue            # 博客列表页     
│  │  │  └─ [slug].vue            # 博客详情页   
│  │  ├─ about.vue               # 关于页面  
│  │  └─ index.vue               # 首页    
│  ├─ utils                        
│  └─ app.vue   			        # 根组件               
├─ public                          
│  ├─ favicon.ico                  
│  └─ robots.txt                   
├─ components.json                 
├─ nuxt.config.ts      		        # Nuxt 配置文件          
├─ package.json                    
├─ pnpm-lock.yaml                  
├─ README.md                       
└─ tsconfig.json

1. app.vue

如果你一直跟着我的进度来的话，这里先清空原先测试UI时的代码。

vue 复制代码

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

2. nuxt.config.ts

typescript 复制代码

import tailwindcss from "@tailwindcss/vite";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  css: ['./app/assets/css/main.css'],
  modules: ['motion-v/nuxt'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
  app: {
    head: {
      title: '申阳的博客',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    }
  }
})

3. 布局 layouts/default.vue

vue 复制代码

<script setup lang="ts"></script>

<template>
  <div class="min-h-screen">
    <AppHeader />
    <main class="flex">
      <AppSidebar />
      <slot />
    </main>
    <AppFooter />
  </div>
</template>

三、完善一下页面布局，伪代码

我们先把接下来的开发方向大致定一下，然后逐步的去是实现，每天完善一点。

头部导航
侧边栏
主体显示
底部显示
博客页/详情展示

我们不用考虑细节，先用有色方块占住位置，让我们有个大概认知。

这里我就不赘述了，后续我会将源码公开。

大致就会变成下面这样。

四、引入 daisyUI 组件库

官网地址: daisyui.com/

GitHub：github.com/saadeghi/da...

之前我们引入了Inspira UI 目的在于一些炫酷的动画效果组件，而日常开发使用更多的其实是一些，按钮，表单等等，这个时候daisyui则更为合适，最重要的是它与tailwindcss 高度契合，没有任何使用负担。

1. 安装

bash 复制代码

pnpm add -D daisyui@latest

2. 添加指令

css 复制代码

@plugin "daisyui";

3. 测试

vue 复制代码

<div class="flex justify-center items-center grow">
    <button class="btn btn-neutral">Neutral</button>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-accent">Accent</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-error">Error</button>
</div>

五、头部组件开发

接下来就是组件开发阶段了，这里我先大致描述一下目标，具体实现，大家可以根据自己情况来，下面我贴几个常见的头部菜单，可供参考。大家也可以去这里找一找有没有顺眼的，参考一下，hexo.io/themes/

六、展示最终效果

吸顶效果
半透明效果
点击按钮跳转到指定路由

千里之行，始于足下。你的"个人公司"从这第一个2小时开始。欢迎在评论区分享你的进展或遇到的卡点，我会逐一查看，尽可能的帮住解决。我们下一篇文章见！