nuxtjs项目功能介绍，使用步骤完整配置示例说明和演示

Nuxt.js 是一个基于 Vue.js 的通用应用框架，主要用于构建服务端渲染（SSR）、静态站点（SSG）或单页应用（SPA）。它提供了开箱即用的路由、状态管理、代码分割、SEO 优化等功能，非常适合构建现代化的 Web 应用。

---

🧩 一、Nuxt.js 核心功能介绍

功能	描述
服务端渲染 (SSR)	提高 SEO 和首屏加载速度
静态站点生成 (SSG)	构建完全静态的网站（适用于博客、文档站等）
自动路由系统	基于 pages/ 目录结构自动生成 Vue Router 配置
模块化架构	支持通过 Nuxt 模块扩展功能（如 Axios、PWA、TailwindCSS 等）
TypeScript 支持	内置 TypeScript 支持
热重载 & 开发服务器	快速开发体验
插件系统	可注入全局方法或第三方库（如 axios、dayjs）
中间件支持	页面级或全局中间件控制访问逻辑
SEO 优化	自动设置 meta 标签、title 等

---

🛠️ 二、使用步骤（完整配置示例）

步骤 1：创建 Nuxt 项目（以 Nuxt 3 为例）

要求：Node.js ≥ v16

# 使用 Nuxt 官方脚手架创建项目
npx nuxi@latest init my-nuxt-app
cd my-nuxt-app

# 安装依赖（推荐使用 pnpm）
pnpm install
# 或 npm install / yarn install

步骤 2：项目结构说明（关键目录）

my-nuxt-app/
├── app.vue                # 根组件（替代传统 App.vue）
├── nuxt.config.ts         # Nuxt 配置文件
├── pages/                 # 页面路由（自动路由）
│   └── index.vue          # 首页 → /
├── components/            # 全局组件（自动导入）
├── composables/           # 可组合函数（类似 Vue 的 composable）
├── plugins/               # 插件（如 axios 初始化）
├── public/                # 静态资源（直接复制到根路径）
├── assets/                # 需要构建的资源（如图片、样式）
└── server/                # API 路由（Nitro 服务器端点）
    └── api/
        └── hello.get.ts   # GET /api/hello

步骤 3：编写页面（pages/index.vue）

<template>
  <div>
    <h1>Welcome to Nuxt 3!</h1>
    <p>Current time: {{ currentTime }}</p>
    <button @click="fetchMessage">Fetch from API</button>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
const currentTime = ref(new Date().toLocaleTimeString())
const message = ref('')

// 调用本地 API
async function fetchMessage() {
  const res = await $fetch('/api/hello')
  message.value = res.message
}
</script>

步骤 4：创建 API 端点（server/api/hello.get.ts）

export default defineEventHandler(() => {
  return {
    message: 'Hello from Nuxt Server API!'
  }
})

步骤 5：配置 nuxt.config.ts（可选增强）

// nuxt.config.ts
export default defineNuxtConfig({
  // 启用 TypeScript 类型检查
  typescript: {
    strict: true
  },
  // 自定义头部信息（SEO）
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'A demo Nuxt 3 application' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  },
  // 模块（例如：添加 Tailwind CSS）
  modules: [
    // '@nuxtjs/tailwindcss'
  ],
  // 构建时生成静态站点（可选）
  ssr: true, // 默认 true（SSR），设为 false 则为 SPA
  // target: 'static' 已废弃，Nuxt 3 使用 `ssr: false` + `nitro` 配置
})

步骤 6：运行与构建

# 开发模式（带热重载）
pnpm run dev

# 构建生产版本（默认 SSR）
pnpm run build

# 启动生产服务器
pnpm run preview

# 生成静态站点（如果需要 SSG）
# 在 nuxt.config.ts 中设置：
// export default defineNuxtConfig({ ssr: true })
// 然后运行：
pnpm run generate  # 注意：Nuxt 3 中 `generate` 用于静态导出

💡 Nuxt 3 使用 Nitro 引擎，build 默认输出 SSR 应用，generate 输出静态 HTML。

---

🌐 三、部署方式

类型	命令	部署平台
SSR 应用	build → start	Vercel, Render, Node 服务器
静态站点	generate	GitHub Pages, Netlify, Vercel

例如部署到 Vercel（自动识别 Nuxt 3）：

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel

---

✅ 四、演示效果

1. 访问 http://localhost:3000 → 显示欢迎页和当前时间。
2. 点击按钮 → 调用 /api/hello → 显示 "Hello from Nuxt Server API!"。
3. 查看页面源码 → 包含 <h1> 内容（说明 SSR 生效）。
4. 构建后部署 → 支持 SEO 和快速加载。

---

🔗 五、官方资源

• 官网：https://nuxt.com
• 文档：https://nuxt.com/docs
• 示例项目：https://github.com/nuxt/examples