NuxtPro

Appearance

开发教程 ​

欢迎来到 NuxtPro 开发教程！本教程旨在帮助您快速熟悉项目的技术栈和代码结构，无论您是想添加新功能、修复 Bug，还是仅仅想深入学习 Nuxt 3，这里都将为您提供清晰的指引。

技术栈概览 ​

NuxtPro 构建在一系列现代化、高效的前端技术之上：

  • 🌐 NuxtJs3 -> 开源的全栈的适用于生产环境的 NuxtJs 框架.
  • 🌈 Vue 3 -> 用于 Web 和原生用户界面的开源代码库.
  • 🔒 BetterAuth -> 简单高效的开源认证授权框架.
  • ✅ Shadcn UI -> 用于构建现代风格界面的开源UI组件.
  • 🎨 Tailwindcss -> 用于快速 UI 开发的开源 CSS 框架.
  • 🔍 DrizzleOrm -> 用于 Node.js 和 TypeScript 的开源下一代数据库工具包.
  • 💰 Stripe -> 最好、最安全的在线支付服务.
  • 💳 Creem -> 为 SaaS 和独立开发者提供稳定的的在线支付服务.
  • ✉️ Resend -> 为开发者们打造的现代邮件API服务.
  • 👄 i18n -> 开源且轻松地为Nuxt项目添加国际化支持,再小的语种都不怕.
  • 💨 plausible -> 开源且隐私友好的Google Analytics 替代品.
  • 🌙 vite-pwa -> 基于vite的开源且零配置的PWA框架.

项目结构解析 ​

理解项目的目录结构是高效开发的第一步。以下是 NuxtPro 中最核心的几个目录：

nuxt-template/
├── app.config.ts           # 应用配置文件
├── app.vue                 # 主应用入口组件
├── nuxt.config.ts          # Nuxt配置文件
├── package.json            # 项目依赖配置
├── pnpm-lock.yaml          # pnpm锁定文件
├── tailwind.config.js      # TailwindCSS配置
├── tsconfig.json           # TypeScript配置
├── README.md               # 项目说明文档
├── components.json         # 组件配置文件
├── assets/                 # 静态资源
├── components/             # 组件目录
│   ├── nuxtpro/            # Nuxt Pro相关组件
│   │   ├── cta/            # 行动召唤组件
│   │   ├── developer/      # 开发者相关组件
│   │   ├── faq/            # FAQ组件
│   │   ├── features/       # 特性组件
│   │   ├── footer/         # 页脚组件
│   │   ├── header/         # 页头组件
│   │   ├── hero/           # Hero区域组件
│   │   ├── pricing/        # 价格组件
│   │   ├── scrollPopup/    # 滚动弹窗组件
│   │   ├── showcase/       # 展示组件
│   │   ├── testimonials/   # 用户反馈组件
│   │   └── waitlist/       # 等待列表组件
│   │
│   └── ui/                 # UI通用组件
│
├── config/                 # 配置目录
│   └── drizzle.config.ts   # Drizzle ORM配置
│
├── i18n/                   # 国际化目录
│
├── layouts/                # 布局目录
│
├── lib/                    # 库文件目录
│   └── auth/               # 认证相关
│
├── middleware/             # 中间件目录
│
├── pages/                  # 页面目录
│   ├── affiliate/          # 联盟营销页面
│   ├── ai/                 # AI相关页面
│   ├── blog/               # 博客页面
│   ├── customer/           # 客户页面
│   ├── license/            # 许可证页面
│   ├── privacy/            # 隐私政策页面
│   ├── roadmap/            # 路线图页面
│   ├── terms/              # 条款页面
│   ├── cancel.vue          # 取消页面
│   ├── error.vue           # 错误页面
│   ├── index.vue           # 首页
│   └── success.vue         # 成功页面
│
├── plugins/                # 插件目录
│   └── referral.ts         # 推荐插件
│
├── public/                 # 公共资源
│
├── server/                 # 服务端目录
│   ├── api/                # API接口
│   ├── database/           # 数据库相关
│   ├── migrations/         # 数据库迁移
│   ├── plugins/            # 服务端插件
│   └── tsconfig.json       # 服务端TS配置
│
└── utils/                  # 工具函数

实践：添加一个新页面 ​

在 NuxtPro 中创建新页面非常简单，这得益于其基于文件系统的路由。

  1. 在 pages/ 目录下创建一个新的 .vue 文件，例如 my-new-page.vue。

  2. 在该文件中编写您的 Vue 组件代码：

    vue
    <template>
  <div>
    <h1>我的新页面</h1>
    <p>这是通过 NuxtPro 创建的！</p>
  </div>
</template>

<script setup lang="ts">
// 这里可以编写你的逻辑
</script>

  3. 启动开发服务器 (pnpm dev)。

  4. 现在，您可以直接通过浏览器访问 http://localhost:3000/my-new-page 来查看您的新页面。

实践：创建和使用组件 ​

为了代码的复用和可维护性，我们强烈建议将 UI 拆分为独立的组件。

  1. 在 components/nuxtpro 目录下创建一个命名目录，然后创建同名新组件，例如 MyButton.vue。

  2. 编写组件代码：

    vue
    <template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot>默认按钮</slot>
  </button>
</template>

  3. 由于 Nuxt 3 的自动导入功能，您无需在任何地方注册或导入这个组件。直接在您的页面或其他组件中使用它即可：

    vue
    <!-- 在 pages/my-new-page.vue 中 -->
<template>
  <div>
    <h1>我的新页面</h1>
    <p>这是一个自定义按钮的示例：</p>
    <MyButton>点我！</MyButton>
  </div>
</template>

实践：创建后端 API ​

Nuxt 3 允许您在 server/api/ 目录下直接创建后端接口。

  1. 在 server/api/ 目录下创建对应api的分类目录，然后创建一个接口文件，例如 /hello/hello.ts。

  2. 编写您的 API 逻辑：

    typescript
    // server/api/hello/hello.ts
export default defineEventHandler((event) => {
  return {
    message: 'Hello from NuxtPro API!'
  }
})

  3. 您的 API 端点现在已经可用了！您可以通过 http://localhost:3000/api/hello/hello 访问它。

下一步 ​

本教程只是一个开始。我们鼓励您：

  • 浏览 pages/ 和 components/ 目录，了解现有页面的实现方式。
  • 阅读 server/api/ 中的代码，学习如何与数据库和外部服务交互。
  • 尝试修改现有代码，看看会发生什么！

祝您在 NuxtPro 的世界里探索愉快！