第2章：服务端渲染Nuxt4框架

最新推荐文章于 2025-09-25 01:56:37 发布

原创最新推荐文章于 2025-09-25 01:56:37 发布 · 704 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#在线教育平台

使用Nuxt搭建项目

Nuxt3是一个基于Vue的服务端渲染框架，支持Vue3、TS

方法一

通过nuxt搭建项目

安装：

npx nuxt init nuxt-app

下载依赖：

yarn

方法二

初始化模板github地址：https://github.com/nuxt/starter/tree/v3
初始化模板gitee地址：https://gitee.com/ikexing/nuxt-app

将文件拷贝到本地文件夹，如何用编译器打开这个文件，然后在终端使用yarn安装文件

Nuxt4项目文件和页面布局

版本使用node 20.19.0版本。

nuxt的官方网站是：https://nuxt.com/

.gitignore   		// 忽略不需要git维护的文件
.nuxt						// 自动生成的目录，其他文件夹的引入配置
.npmrc    	 		// 兼容部分依赖包
public       		// 放置静态图片
nuxt.config.ts  // nuxt配置文件
LICENSE 				// gitee认证文件
app.vue					// 页面入口文件
components			// 组件文件夹
layout					// 页面的布局
pages						// 页面文件夹

使用命令行中使用 yarn dev 打开文件

注意：

当我们有pages文件夹的话必须要有index.vue，否则需要删除pages文件夹。

当我们使用nuxt框架是不需要自己配置路由的。直接使用<NuxPage />相当于我们路由的<router-view>，在pages文件夹中定义页面文件，就可以实现切换。在其pages目录下面添加不一样的vue文件就可以切换不一样的路径。

页面布局

在app.vue里面开发，NuxtLayout使用公共组件

<template>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
</template>

在app\layouts\default.vue里面编写以下代码

<template>
  <div>
    头部
    <slot />
    底部
  </div>
</template>

<script setup>

</script>

<style scoped lang=''>

</style>

Nuxt4公共组件和路由的使用

组件的定义和使用

我们不需要直接引入使用，而是可以创建多层文件夹进行套用，如下图，Banner文件夹中还套用了一个Chil的文件夹，这样我们就可以使用BannerChild标签来引入Child.vue里面的文件。

路由

路由我们可以使用声明式的路由方式<nuxt-link to="/about">跳转去关于页面</nuxt-link>，使用nuxt-link标签实现跳转。

也可以使用函数式的路由方式<div @click="navigateTo('/')">跳转去首页</div>，使用@click标签里面用navigateTo方法实现页面的跳转。

路由传参，声明式： <nuxt-link to="/about?data=我是首页的数据">跳转去关于页面</nuxt-link>。

路由传参，函数式： <div @click="navigateTo('/?data=我是关于的数据')">跳转去首页</div>。

我们可以使用useRouter().query().data取到其传递的属性，其中的data是你定义的值。

函数式也可以使用以下方法：

<div @click="navigateTo({
      path:'/',
      query:{data:'我是关于的数据'}
    })">
    跳转去首页
</div>

嵌套路由

Nuxt+Node项目样式的SSR

启动nuxt-app和seo-serve项目

将nuxt-app的index.vue文件该写为以下格式

<template>
  <div>  
    {{ data }}
  </div>
</template>

<script setup>
import { ref } from 'vue';
const data = ref('')
const resData = await useFetch('http://127.0.0.1:8081/test')

console.log(resData)
</script>

<style scoped>
</style>

进行浏览器调试，发现其数据在data.value.data下面

最后将data.value=resData.data.value.data

右键查看网页源代码发现，里面有对应的名称

useFetch用法

// get
useFetch('url',{
  method:"get",
  params:{id:1}
)

//post
useFetch('url',{
  method:"post",
  params:{id:1}
)

在seo-seve的app.js里面添加以下内容

在nuxt-app的index.vue里面添加以下内容

启动项目查看控制台，发现调用成功

useHead

我们可以通过useHead设置SEO，来添加我们网站被搜索引擎增加的排名。

我们要改变app.vue文件，使用useHead来添加我们的meta里面的description和keywords关键词。

<template>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
</template>


<script setup>
useHead({
  title:'在线教育平台',
  meta:[
    {    name:"description",content:"在线教育平台官网"},
    {    name:"keywords",content:"在线教育，孩子学习的好帮手"},
  ],
});
</script>

<style scoped>

</style>