使用 Deno 构建 Nuxt 应用

Nuxt 是一个框架，提供了一种直观的方式来创建基于 Vue 的全栈应用程序。它开箱即用地提供了基于文件的路由、多种渲染选项和自动代码拆分。凭借其模块化架构，Nuxt 通过提供构建 Vue 应用程序的结构化方法简化了开发过程。

在本教程中，我们将使用 Deno 构建一个简单的 Nuxt 应用程序，该应用程序将显示恐龙列表，并在您单击名称时允许您了解有关每种恐龙的更多信息

搭建 Nuxt 应用
设置服务器 API 路由
设置 Vue 前端
添加 Tailwind
下一步

您可以在此 repo 中找到此项目的代码。

使用 Deno 搭建 Nuxt 应用跳转到标题

我们可以使用 deno 像这样创建一个新的 Nuxt 项目

deno -A npm:nuxi@latest init

我们将使用 Deno 来管理我们的包依赖项，并可以从 npm 获取 Nuxt 包。这将创建一个具有此项目结构的 nuxt-app

NUXT-APP/
├── .nuxt/                   # Nuxt build directory
├── node_modules/           # Node.js dependencies
├── public/                 # Static files
│   ├── favicon.ico        
│   └── robots.txt         
├── server/                # Server-side code
│   └── tsconfig.json     
├── .gitignore            
├── app.vue               # Root Vue component
├── nuxt.config.ts        # Nuxt configuration
├── package-lock.json     # NPM lock file
├── package.json          # Project manifest
├── README.md            
└── tsconfig.json        # TypeScript configuration

设置服务器 API 路由跳转到标题

让我们首先创建提供恐龙数据的 API 路由。

首先，我们的恐龙数据将作为 server/api/data.json 存在于服务器目录中

// server/api/data.json

[
  {
    "name": "Aardonyx",
    "description": "An early stage in the evolution of sauropods."
  },
  {
    "name": "Abelisaurus",
    "description": "\"Abel's lizard\" has been reconstructed from a single skull."
  },
  {
    "name": "Abrictosaurus",
    "description": "An early relative of Heterodontosaurus."
  },
  ...
]

这是我们将从中提取数据的地方。在完整的应用程序中，此数据将来自数据库。

⚠️️ 在本教程中，我们硬编码数据。但是您可以连接到各种数据库，甚至可以使用像 Prisma 这样的 ORM 与 Deno。

接下来，让我们为我们的恐龙数据添加类型定义。我们将把它放在一个新文件夹 types 中

// types/index.ts

export interface Dino {
  name: string;
  description: string;
}

我们将创建两个 API 路由来提供以下内容

索引页面的完整恐龙列表
单个恐龙页面的单个恐龙信息

两者都将是 *.get.ts 文件，Nuxt 会自动将其转换为 API 端点以响应 GET 请求。文件名约定决定了 HTTP 方法和路由路径。

最初的 dinosaurs.get.ts 相当简单，并使用 defineCachedEventHandler 创建缓存端点以获得更好的性能。此处理程序仅返回我们的完整恐龙数据数组，没有任何过滤

// server/api/dinosaurs.get.ts

import data from "./data.json" with { type: "json" };

export default defineCachedEventHandler(() => {
  return data;
});

单个恐龙的 GET 路由具有更多逻辑。它从事件上下文中提取 name 参数，执行不区分大小写的匹配以查找请求的恐龙，并包含针对缺少或无效恐龙名称的适当错误处理。为了传递 name 参数，让我们将此路由命名为 [name].get.ts

// server/api/dinosaurs/[name].get.ts

import data from "../data.json";

export default defineCachedEventHandler((event) => {
  const name = getRouterParam(event, "name");

  if (!name) {
    throw createError({
      statusCode: 400,
      message: "No dinosaur name provided",
    });
  }

  const dinosaur = data.find(
    (dino) => dino.name.toLowerCase() === name.toLowerCase(),
  );

  if (!dinosaur) {
    throw createError({
      statusCode: 404,
      message: "Dinosaur not found",
    });
  }

  return dinosaur;
});

太棒了。当我们使用 deno task dev 运行服务器并将浏览器指向 localhost:3000/api/dinosaurs 时，我们可以看到显示所有恐龙的原始 JSON 响应

Setting up API

您还可以通过访问 localhost:3000/api/dinosaurs/aardonyx 来检索单个恐龙的数据。

Setting up API

接下来，让我们使用 Vue 设置前端以显示索引页和每个单独的恐龙页面。

设置 Vue 前端跳转到标题

我们想在我们的应用程序中设置两个页面

一个索引页面，将列出我们所有的恐龙
一个单独的恐龙页面，显示有关我们选择的恐龙的更多信息。

让我们首先创建索引页面。由于 Nuxt 使用文件系统路由，让我们创建一个 pages 目录，并在其中创建我们的索引页面 pages/index.vue。为了获取数据，我们将使用 useFetch composable 来访问我们在上一节中创建的 API 端点

// pages/index.vue

<script setup lang="ts">
const { data: dinosaurs } = await useFetch("/api/dinosaurs");
</script>

<template>
  <main>
    <h1 class="text-2xl font-bold mb-4">Welcome to the Dinosaur app</h1>
    <p class="mb-4">Click on a dinosaur below to learn more.</p>
    <ul class="space-y-2">
      <li v-for="dinosaur in dinosaurs" :key="dinosaur.name">
        <NuxtLink
          :to="'/' + dinosaur.name.toLowerCase()"
          class="text-blue-600 hover:text-blue-800 hover:underline"
        >
          {{ dinosaur.name }}
        </NuxtLink>
      </li>
    </ul>
  </main>
</template>

对于显示每只恐龙信息的下一个页面，让我们创建一个动态页面：pages/[name].vue。此页面使用 Nuxt 的动态路由参数，其中文件名中的 [name] 可以在 JavaScript 中作为 route.params.name 访问。我们将使用 useRoute composable 来访问路由参数，并使用 useFetch 根据 name 参数获取特定恐龙的数据

// pages/[name].vue

<script setup lang="ts">
const route = useRoute();
const { data: dinosaur } = await useFetch(
  `/api/dinosaurs/${route.params.name}`
);
</script>

<template>
  <main v-if="dinosaur">
    <h1 class="text-2xl font-bold mb-4">{{ dinosaur.name }}</h1>
    <p class="mb-4">{{ dinosaur.description }}</p>
    <NuxtLink to="/" class="text-blue-600 hover:text-blue-800 hover:underline">
      Back to all dinosaurs
    </NuxtLink>
  </main>
</template>

接下来，我们将必须将这些 Vue 组件连接在一起，以便在我们访问域的根目录时它们可以正确呈现。让我们更新目录根目录下的 app.vue 以提供我们应用程序的根组件。我们将使用 NuxtLayout 来获得一致的页面结构，并使用 NuxtPage 进行动态页面渲染

// app.vue

<template>
  <NuxtLayout>
    <div>
      <nav class="p-4 bg-gray-100">
        <NuxtLink to="/" class="text-blue-600 hover:text-blue-800">
          Dinosaur Encyclopedia
        </NuxtLink>
      </nav>

      <div class="container mx-auto p-4">
        <NuxtPage />
      </div>
    </div>
  </NuxtLayout>
</template>;

让我们使用 deno task dev 运行我们的服务器，看看它在 localhost:3000 上的外观

看起来很棒！

添加 Tailwind 跳转到标题

就像我们说的那样，我们将为此应用程序添加一些样式。首先，我们将设置一个布局，该布局将使用 Nuxt 的布局系统和基于插槽的内容注入为所有页面提供一致的结构

// layouts/default.vue

<template>
  <div>
    <slot />
  </div>
</template>;

在这个项目中，我们还将使用 tailwind 进行一些基本设计，因此我们需要安装这些依赖项

deno install -D npm:tailwindcss npm:postcss npm:autoprefixer

然后初始化 Tailwind

deno -A npm:tailwindcss init

这将在我们目录的根目录中创建一个 tailwind.config.js 文件。让我们打开它并更新 content 部分以包含我们项目中的关键文件

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

接下来，让我们将 tailwind 实用程序添加到新的 css 文件 assets/css/main.css

// assets/css/main.css

base;
components;
utilities;

我们需要做的另一件事是更新我们的 nuxt.config.ts 文件，以配置我们的 Nuxt 应用程序以实现 Deno 兼容性、启用开发工具并设置 Tailwind CSS。

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  devtools: { enabled: true },

  nitro: {
    preset: "deno",
  },

  app: {
    head: {
      title: "Dinosaur Encyclopedia",
    },
  },

  css: ["~/assets/css/main.css"],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  compatibilityDate: "2024-11-06",
});

运行我们的应用程序跳转到标题

然后我们可以使用以下命令运行我们的应用程序

deno task dev

这将启动位于 localhost:3000 的应用程序

我们完成了！

下一步跳转到标题

Nuxt 应用程序的下一步可能是使用 Nuxt Auth 模块添加身份验证，使用 Pinia 实现状态管理，使用 Prisma 或 MongoDB 添加服务器端数据持久性，并使用 Vitest 设置自动化测试。这些功能将使其为更大的应用程序做好生产准备。

使用 Deno 构建 Nuxt 应用

使用 Deno 搭建 Nuxt 应用 跳转到标题#

设置服务器 API 路由 跳转到标题#

设置 Vue 前端 跳转到标题#

添加 Tailwind 跳转到标题#

运行我们的应用程序 跳转到标题#

下一步 跳转到标题#