title: Nuxt3页面开发实战探索
date: 2024/6/19
updated: 2024/6/19
author: cmdragon
excerpt:
摘要：这篇文章是关于Nuxt3页面开发实战探索的。它介绍了Nuxt3的基础入门，安装与配置，项目结构，内置组件与功能，以及页面与路由的相关内容。Nuxt3是基于Vue 3的服务器端渲染框架，旨在简化Vue应用程序的开发流程，提供最佳的性能和开发
categories:
- 前端开发
tags:
- Nuxt3
- 页面开发
- 实战探索
- 前端开发
- Vue3框架
- 服务器端渲染
- 开发流程优化
扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长
Nuxt3基础入门
2.1 Nuxt3简介
Nuxt3 是一个基于 Vue 3 的服务器端渲染（SSR）框架，它继承了 Nuxt.js 的核心概念，并利用 Vue 3 的最新特性，如组合式
API（Composition API）和<script setup>语法，来提供更加现代化的开发体验。Nuxt3 旨在简化 Vue 应用程序的开发流程，同时提供最佳的性能和开发体验。
2.2 Nuxt3安装与配置
安装
安装 Nuxt.js 的步骤和注意事项 | cmdragon's Blog
要安装 Nuxt3，首先确保你的系统中已经安装了 Node.js（推荐版本为 14 或更高）。然后可以使用以下命令创建一个新的 Nuxt3 项目：
npx nuxi init my-nuxt3-project
这个命令会创建一个名为my-nuxt3-project的新目录，并安装必要的依赖。
配置
Nuxt3 的配置文件是nuxt.config.ts（或nuxt.config.js），位于项目根目录。在这个文件中，你可以定义各种配置，如服务器端口、路由、插件、环境变量等。
// nuxt.config.ts
export default defineNuxtConfig({
// 配置项
server: {
port: 3000, // 服务器端口
},
// 其他配置...
})
2.3 Nuxt3项目结构
Nuxt.js 深入浅出：目录结构与文件组织详解 | cmdragon's Blog
Nuxt3 项目遵循一定的目录结构，以下是主要目录和文件的说明：
pages/: 页面目录，每个文件对应一个路由。components/: 组件目录，存放可复用的 Vue 组件。layouts/: 布局目录，定义全局页面布局。plugins/: 插件目录，存放可复用的插件。composables/: 组合式函数目录，用于存放可复用的逻辑。assets/: 静态资源目录，如图片、样式表等。store/: 状态管理目录，存放 Vuex 或 Pinia 状态管理文件。app.vue: 应用程序的主组件，可以包含全局样式和布局。nuxt.config.ts(或nuxt.config.js): Nuxt3 的配置文件。package.json: 项目依赖和脚本。
2.4 Nuxt3内置组件与功能
Nuxt3 提供了一系列内置组件和功能，以简化开发流程：
<NuxtLayout>: 用于定义页面布局。<NuxtPage>: 用于渲染当前路由对应的页面。<NuxtLink>: 用于创建导航链接。<NuxtLoadingIndicator>: 显示页面加载指示器。<ClientOnly>: 用于只在客户端渲染内容。<ServerOnly>: 用于只在服务器端渲染内容。
此外，Nuxt3 还提供了许多内置功能，如路由系统、中间件、生命周期钩子、状态管理等，以支持复杂的Web应用开发。
页面与路由
3.1 页面文件与路由规则
在 Nuxt3 中，页面文件通常位于pages目录下，每个文件对应一个路由。文件名（不包括扩展名）就是路由路径。例如，pages/about.vue
对应的路由是/about。Nuxt3 使用静态文件作为路由的入口点，这意味着文件名和路由之间是一一对应的。
路由规则通常在nuxt.config.ts中定义，可以使用router对象来配置。例如，设置默认路由：
export default defineNuxtConfig({
router: {
base: '/', // 设置网站的根路径
routes: [
{ path: '/', component: () => import('@/pages/index.vue') }, // 首页
{ path: '/about', component: () => import('@/pages/about.vue') }, // 关于页面
]
}
})
3.2 动态路由与参数传递
动态路由使用冒号:来定义参数，例如:id。当用户访问/users/:id时，id就会被解析为 URL
中的参数。在页面中，可以通过this.$route.params访问这些参数：
export default {
setup() {
const id = this.$route.params.id;
// 使用id
}
}
3.3 子路由与嵌套路由
子路由允许在单个路由下定义多个子路径。在 Nuxt3 中，可以使用children属性来定义子路由：
export default defineNuxtRoute({
path: 'users/:userId',
component: () => import('@/pages/users.vue'),
children: [
{ path: 'profile', component: () => import('@/pages/users/profile.vue') },
{ path: 'settings', component: () => import('@/pages/users/settings.vue') }
]
})
3.4 路由元数据与页面配置
meta属性用于设置页面的元数据，如标题、描述等，对SEO有帮助。在页面组件中，可以这样定义：
export default {
setup() {
const meta = {
title: '用户设置',
meta: {
description: '这是用户设置页面的描述',
keywords: '设置, 用户'
}
};
return { meta };
}
}
3.5 路由跳转与导航
Nuxt3 提供了多种方式来导航：
this.$router.push(path): 向前（浏览器前进）导航到新的路由。this.$router.replace(path): 向前（浏览器前进）导航到新的路由，但不会在浏览器历史记录中留下记录。this.$router.go(n): 直接改变浏览器的前进或后退历史，n 是整数。
使用<NuxtLink>组件可以创建可点击的链接，它们会自动处理路由跳转：
<NuxtLink to="/users/:userId/profile">用户资料</NuxtLink>
这将创建一个链接，点击后会导航到用户资料页面。
页面布局与组件
4.1 页面布局组件（NuxtLayout）
RIPEMD在线加密 | 一个覆盖广泛主题工具的高效在线平台 (cmdragon.cn)
Nuxt3 的页面布局组件（NuxtLayout）用于定义页面的通用结构，如头部、尾部和侧边栏。这些组件通常位于layouts
目录下，如layouts/default.vue。每个页面可以覆盖或继承布局，通过在nuxt.config.ts中配置defaultLayout：
export default defineNuxtConfig({
router: {
defaultLayout: 'MainLayout'
},
components: {
MainLayout: () => import('@/components/layouts/MainLayout.vue')
}
})
4.2 页面占位组件（NuxtPage）
NuxtPage是 Nuxt3 中的一个特殊组件，它代表一个单独的页面。每个页面组件（如pages/about.vue）实际上就是一个NuxtPage
，它会自动包含在相应的布局组件中。
4.3 公共组件与页面组件
- 公共组件：这些组件可以在多个页面中复用，通常用于通用的功能，如导航栏、表单验证等。在
components目录下创建，然后在需要的地方导入使用。 - 页面组件：每个页面有自己的组件，它们只在该页面中使用。例如，
pages/about.vue中的AboutContent就是该页面特有的。