初步接触nuxt3

Sun, 06 Apr 2025 19:18:28 +0800

关键概念

导入功能的提升

Components 文件夹组件自动导入

在 Nuxt 中，你可以在 components/ 目录中创建这些组件，它们将自动在整个应用程序中可用，无需显式地导入。

Auto-imports 自动导入(响应式 API、生命周期)

<script setup lang="ts">
/* ref() and computed() are auto-imported */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Built-in Auto-imports 内置自动导入

1
2
3

<script setup lang="ts">
  /* useFetch() is auto-imported */ const {(data, refresh, status)} = await useFetch('/api/hello')
</script>

Vue.js 路由

1. 通过`pages/`每个组件生成路由

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

2. `<NuxtLink>`标签进行路由跳转

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

3. Route Parameters 路由参数

<script setup lang="ts">
  const route = useRoute() // When accessing /posts/1, route.params.id will be 1
  console.log(route.params.id)
</script>

4. Route Middleware 路由中间件

导航到特定路由之前提取要运行的代码
路由中间件在 Nuxt 应用程序的 Vue 部分运行。尽管名称相似，但它们与服务器中间件完全不同，后者在应用程序的 Nitro 服务器部分运行。

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo("/login");
  }
});

<script setup lang="ts">
definePageMeta({
  middleware: "auth",
});
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

5. Route Validation 路由验证

Nuxt 通过你想要验证的每个页面中 definePageMeta（）中的 validate 属性提供路由验证。
validate 属性接受路由作为参数。您可以返回一个布尔值，以确定这是否是要使用此页面呈现的有效路由。如果返回 false，但找不到其他匹配项，则会导致 404 错误。您也可以直接返回带有 statusCode/statusMessage 的对象，以立即响应错误（不会检查其他匹配项）。

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    // Check if the id is made up of digits
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  }
})
</script>

Rendering Modes 渲染模式

浏览器和服务器都可以解释 JavaScript 代码，以将 Vue.js 组件转换为 HTML 元素。此步骤称为渲染。
默认情况下，Nuxt 使用通用渲染来提供更好的用户体验、性能并优化搜索引擎索引，但您可以在一行配置中切换渲染模式。

关于服务端渲染和客户端渲染的一个bug，使用setInterval计时器,服务端报错500

1
2
3

setInterval(() => {
  request()
}, 3000);

1. 问题分析

当你在 Nuxt 的组件或页面中直接使用 setInterval 时，这段代码会在服务端渲染阶段被执行。然而，setInterval 是浏览器环境中的 API，在服务端（Node.js）环境中会报错，提示类似以下内容：

`1`	`ReferenceError: setInterval is not defined`

2. 解决方案

使用 process.client 判断是否在客户端运行

nuxt 提供了 process.client 变量，用于判断当前代码是否在浏览器环境中运行。你可以通过这个变量确保 setInterval 只在客户端执行。

// 确保 setInterval 只在客户端运行
if (process.client) {
  const intervalId = setInterval(() => {
    loadData()
  }, 3000)

  // 组件销毁时清除计时器，防止内存泄漏
  onUnmounted(() => {
    clearInterval(intervalId)
  })
}

将计时器逻辑放在 mounted 生命周期钩子中

在 Vue.js 中，mounted 钩子只会在客户端渲染完成后执行，因此可以将计时器逻辑放在这里。

export default {
  mounted() {
    this.interval = setInterval(() => {
      this.loadData();
    }, 3000);
  },
  beforeDestroy() {
    // 清除计时器，防止内存泄漏
    clearInterval(this.interval);
  },
  methods: {
    loadData() {
      console.log('加载数据...');
    }
  }
};

什么是服务器渲染的，什么是客户端渲染的？

<script setup lang="ts">
const counter = ref(0); // executes in server and client environments

const handleClick = () => {
  counter.value++; // executes only in a client environment
};
</script>

<template>
  <div>
    <p>Count: {{ counter }}</p>
    <button @click="handleClick">Increment</button>
  </div>
</template>

在初始请求中，计数器 ref 在服务器中初始化，因为它呈现在 <p>标记内。handleClick 的内容在此处永远不会执行。在浏览器中激活期间，counter ref 会重新初始化。handleClick 最终将自身绑定到按钮;因此，可以合理地推断 handleClick 的主体将始终在浏览器环境中运行。

Universal Rendering 通用渲染

原理

当浏览器请求启用了通用渲染的 URL 时，Nuxt 会在服务器环境中运行 JavaScript （Vue.js）代码，并将完全渲染的 HTML 页面返回给浏览器。如果页面是提前生成的，Nuxt 也可以从缓存中返回完全渲染的 HTML 页面。用户会立即获得应用程序的全部初始内容，这与客户端渲染相反。
下载 HTML 文档后，浏览器会解释此内容，Vue.js 将控制该文档。曾经在服务器上运行的相同 JavaScript 代码再次在客户端（浏览器）上运行，现在通过将其侦听器绑定到 HTML 来启用交互性（因此是通用渲染）。

效果

通用渲染允许 Nuxt 应用程序提供快速的页面加载时间，同时保留客户端渲染的优势。此外，由于内容已经存在于 HTML 文档中，因此爬网程序可以毫无开销地为其编制索引。
通用渲染用途广泛，几乎可以适应任何用例，特别适用于任何面向内容的网站：博客、营销网站、投资组合、电子商务网站和市场。

1. 服务器端渲染（SSR）

概念:
- 在 SSR 模式下，页面的 HTML 内容是在服务器端动态生成的，然后发送到客户端。客户端接收到 HTML 后，再通过 JavaScript 进行进一步的交互。
- SSR 是 Nuxt 3 的默认渲染模式，适合需要 SEO 优化或需要快速首屏加载的应用。
好处
- 性能：用户可以立即访问页面的内容，因为浏览器显示静态内容的速度比 JavaScript 生成的内容快得多。同时，Nuxt 在水合过程中保留了 Web 应用程序的交互性。
- 搜索引擎优化：通用渲染将页面的整个 HTML 内容作为经典服务器应用程序交付给浏览器。Web 爬虫可以直接为页面的内容编制索引，这使得 Universal rendering 成为您想要快速编制索引的任何内容的绝佳选择。
缺点
- 开发约束：服务器和浏览器环境不提供相同的 API，因此编写可以在两端无缝运行的代码可能很棘手。幸运的是，Nuxt 提供了指南和特定变量来帮助您确定一段代码的执行位置。
- 成本：需要运行服务器才能动态呈现页面。这会增加每月成本，就像任何传统服务器一样。但是，由于浏览器接管了客户端导航的通用渲染，服务器调用大大减少了。利用 edge-side 渲染可以降低成本。

2. 静态站点生成（Static Site Generation, SSG）

在 SSG 模式下，页面的 HTML 是在构建时预先生成的，并作为静态文件部署到服务器。这些静态页面可以在没有服务器端逻辑的情况下直接被客户端加载。
SSG 适合内容不经常更新的网站，如博客或文档网站。

3. 单页应用（Single Page Application, SPA）

在 SPA 模式下，页面的 HTML 是在客户端动态生成的，服务器只提供一个初始的 HTML 模板和必要的 JavaScript 文件。
SPA 适合对交互性要求较高的应用，但可能对 SEO 不太友好。

Client-Side Rendering 客户端渲染

相较于通用渲染相反，不做过多叙述

好处
- 开发速度：不考虑服务器的兼容性
- 便宜：不考虑服务器基础设施成本
- 离线：在 Internet 不可用时很好地保持工作
缺点
- 性能: 需等待浏览器下载、解析、运行js，响应长，影响用户体验
- 搜索引擎优化: 索引和更新通过客户端渲染交付的内容需要更多时间。不利于引擎爬虫。

您可以在 nuxt.config.ts中使用 Nuxt 启用仅客户端渲染：

1
2
3

export default defineNuxtConfig({
  ssr: false
})

:warning: 如果你确实使用 ssr： false，你还应该放置一个 HTML 文件， ~/app/spa-loading-template.html 其中包含一些你想用来渲染加载屏幕的 HTML，该屏幕将一直呈现，直到你的应用程序被激活。

Deploying a Static Client-Rendered App部署静态客户端呈现的应用程序

Hybrid Rendering 混合渲染

Route Rules 路由规则

Edge-Side Rendering 边侧渲染

Nuxt的Server层服务

通过`defineEventHandler()`定义接口

server文件夹下定义接名字`channel.get.ts`，默认get接口

//  server
//  - /api
// 	  - channel.get.ts
import channel from "~/database/channel" //channel 是database定义的默认数据
export default defineEventHandler(()=>{
    return channel
})

使用useFetch()调用接口

1
2
3

// 无需导入
// 解构-重命名
const {data:channelList} =await useFetch('/api/channel')

我写过的项目的写法的记录

import { API_HOT_CATEGORY_LIST } from '~/api/category'
import { nodeFetch } from '~/server/utils/handle'

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const data = await nodeFetch(API_HOT_CATEGORY_LIST, { body, nitroEvent: event })

  return {
    data,
    status: 0,
    info: 'ok',
  }
})

feidu 智慧社区数据大屏

Sun, 30 Mar 2025 00:00:00 +0000

feidu 是一个 Nuxt 3、Vue、Tailwind CSS 和 ECharts 组成的智慧社区数据大屏项目。它把社区管理、安防监控、CIM 平台、能源检测和节能分析集中在一个可视化界面里，适合展示智慧社区、园区管理、安防运维和能源数据看板类项目的前端实现方式。

适合谁

想参考智慧社区、智慧园区或数据大屏界面实现的人。
想学习 Nuxt 3、Vue、Tailwind CSS 和 ECharts 组合方式的人。
需要安防监控、CIM 平台、能源检测、节能分析等可视化页面结构的人。
想看真实线上演示，而不是只看静态截图的前端学习者。

项目价值

feidu 的价值在于它不是单个图表练习，而是把多种业务模块组织成一个完整大屏：左侧展示安防概况、摄像头监控和报警信息，中间展示城市 / 社区 CIM 场景，右侧展示舒适度、能耗、系统能效和机组运行状态。底部还提供社区管理、安保监控、CIM 平台、能源检测和节能分析等模块切换入口。

如果你搜索的是 smart community dashboard、Vue ECharts dashboard、Nuxt 3 data visualization、security monitoring dashboard、energy monitoring dashboard 或 CIM platform UI，这个项目可以作为一个可运行的前端大屏参考。

技术方向

Nuxt 3
Vue
Tailwind CSS
ECharts
Element Plus
数据可视化大屏
智慧社区界面
安防监控看板
能源监测与节能分析
CIM 平台前端展示

项目入口

GitHub 仓库：linsk27/feidu
线上演示：feidu-murex.vercel.app
项目总览：linsk27 Projects

如果这个智慧社区数据大屏对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续完善项目文档、模块说明和线上演示体验的主要信号。

bilibili-nuxt3 Nuxt3 移动端项目

Sun, 23 Mar 2025 00:00:00 +0000

bilibili-nuxt3 是一个 Nuxt 3、Vue、TypeScript 和 Vant 移动端项目实战，围绕视频列表、频道导航、视频详情、分页加载、服务端渲染和 SEO 信息配置展开。它适合作为 Nuxt 3 project、Vue mobile app、Nuxt SSR SEO 和前端移动端页面结构的参考。

适合谁

想参考 Nuxt 3、Vue 和 TypeScript 移动端项目结构的人。
正在学习 SSR、SEO meta、文件路由和首屏数据获取的人。
需要 Vant UI、频道导航、视频列表和详情页示例的人。
想做移动端前端项目实战、课程项目或简历作品的人。

项目价值

这个项目的价值在于它把 Nuxt 的服务端渲染、SEO 信息配置、文件路由、移动端适配和数据交互放在一个完整示例里。相比普通组件练习，它更接近真实移动端内容应用，适合用来观察首页信息流、频道 tab、视频卡片和详情页之间的组织方式。

项目预览图来自仓库 README。历史线上预览链接当前连接不稳定，因此这个项目页优先保留稳定的截图、技术说明和 GitHub 仓库入口，后续演示站恢复后再补充新的在线入口。

技术方向

Nuxt 3
Vue
TypeScript
Vant UI
SSR
SEO meta
移动端 vw 适配
视频列表与详情页

项目入口

GitHub 仓库：linsk27/bilibili-nuxt3
项目总览：linsk27 Projects

如果这个 Nuxt 3 移动端项目对你有参考价值，欢迎在 GitHub 仓库点 Star。Star 是我继续完善预览、运行文档和项目说明的主要信号。

Nuxt3 on 404_@林达

初步接触nuxt3

关键概念

导入功能的提升

Components 文件夹组件自动导入

Auto-imports 自动导入(响应式 API、生命周期)

Built-in Auto-imports 内置自动导入

Vue.js 路由

1. 通过pages/每个组件生成路由

2. <NuxtLink>标签进行路由跳转

3. Route Parameters 路由参数

4. Route Middleware 路由中间件

5. Route Validation 路由验证

Rendering Modes 渲染模式

关于服务端渲染和客户端渲染的一个bug，使用setInterval计时器,服务端报错500

1. 问题分析

2. 解决方案

什么是服务器渲染的，什么是客户端渲染的？

Universal Rendering 通用渲染

原理

效果

1. 服务器端渲染（SSR）

2. 静态站点生成（Static Site Generation, SSG）

3. 单页应用（Single Page Application, SPA）

Client-Side Rendering 客户端渲染

Deploying a Static Client-Rendered App部署静态客户端呈现的应用程序

Hybrid Rendering 混合渲染

Route Rules 路由规则

Edge-Side Rendering 边侧渲染

Nuxt的Server层服务

通过defineEventHandler()定义接口

server文件夹下定义接 名字channel.get.ts，默认get接口

使用useFetch()调用接口

我写过的项目的写法的记录

feidu 智慧社区数据大屏

适合谁

项目价值

技术方向

项目入口

bilibili-nuxt3 Nuxt3 移动端项目

适合谁

项目价值

技术方向

项目入口

1. 通过`pages/`每个组件生成路由

2. `<NuxtLink>`标签进行路由跳转

通过`defineEventHandler()`定义接口

server文件夹下定义接名字`channel.get.ts`，默认get接口