使用 Vue.js 和 Tailwind CSS 构建响应式 404 页面

应用场景

在构建现代 Web 应用程序时，提供出色的用户体验至关重要。当用户访问不存在的页面时，提供一个美观且有用的 404 页面可以改善用户体验并防止他们感到困惑或沮丧。

代码基本功能

这段代码使用 Vue.js 和 Tailwind CSS 创建了一个响应式 404 页面。它具有以下基本功能：

• 显示一个自定义的 404 错误消息
• 显示一个随机图像
• 根据用户输入更新关键字

功能实现步骤及关键代码分析

1. 设置 Vue 实例

首先，我们创建一个 Vue 实例并使用 ref API 来管理关键字状态：

import { ref } from 'vue'

const keyword = ref('Abcdefghijk')

2. 构建模板

模板定义了页面的结构和内容：

<template>
  <div
    class="flex flex-col items-center justify-center min-h-screen bg-gray-100"
  >
    <div class="w-full max-w-md p-4 bg-white rounded-lg shadow-md">
      <div class="flex items-center justify-between mb-4">
        <h1 class="text-xl font-semibold text-gray-700">
          Results for "{{ keyword }}"
        </h1>
        <span class="text-sm text-gray-500">0 found</span>
      </div>
      <div class="flex flex-col items-center justify-center">
        <img
          src="https://source.unsplash.com/random/200x200"
          alt="Not Found"
          class="w-20 h-20 mb-4"
        />
        <h2 class="text-xl font-semibold text-gray-700">Not Found</h2>
        <p class="text-sm text-gray-500">
          Sorry, the keyword you entered cannot be found. Please check again or
          search with another keyword.
        </p>
      </div>
    </div>
  </div>
</template>

• 关键代码：
  • {{ keyword }}：使用 Vue.js 的插值语法在模板中显示 keyword 的值。
  • src="https://source.unsplash.com/random/200x200"：使用 Unsplash API 生成一个随机图像。

3. 添加样式

Tailwind CSS 用于为页面添加样式：

body {
  font-family: 'Inter', sans-serif;
}

总结与展望

开发这段代码的过程让我深入了解了 Vue.js 和 Tailwind CSS 的功能。我学到了如何使用 ref API 管理状态，如何使用插值语法在模板中显示动态数据，以及如何使用 Tailwind CSS 来轻松地为页面添加样式。

未来，此 404 页面功能可以扩展和优化，例如：

• 添加一个搜索栏，允许用户搜索其他页面。
• 根据用户输入提供相关的建议。
• 使用动画或交互效果来增强用户体验。