使用Nuxt.js实现服务端渲染(一)

简介

Nuxt 框架提供了一种基于 Node.js 的服务端渲染方案 SSR（Server Side Rendering），可以让 Vue 应用在服务器端进行渲染，从而提高页面的加载速度和 SEO。

 一、安装与创建项目

首先，确保你的系统已经安装了 Node.js 和 npm。然后，通过以下步骤创建一个新的 Nuxt.js 项目：

1. 打开终端或命令提示符，输入以下命令安装 Nuxt.js 脚手架工具：

npm install -g create-nuxt-app

2. 使用脚手架工具创建一个新的 Nuxt.js 项目：

create-nuxt-app my-nuxt-project

 这个命令会引导你完成项目的创建过程，你可以选择预设的功能或手动选择需要的特性。

 二、项目结构

创建完项目后，你会看到一个包含以下文件和目录的结构： 

1. nuxt：Nuxt 自动生成临时文件
2. output：Nuxt 静态站点输出目录
3. public：存放公共资源文件
4. server：服务器相关文件
5. app.vue：应用的根组件 

三、编写页面

在目录下，你可以编写 Vue 组件作为页面。每个 .vue 文件都会对应一个路由。例如，在目录下创建一个文件夹pages，在pages文件夹中创建一个名为 index.vue 的文件，该文件将作为应用的根页面。

参考目录

├─ pages                   页面目录，自动注册路由
│  └─index/index.vue      主页
│  └─video/index.vue      视频页
├─app.vue                  根组件

参考代码

<template>
  <!-- 路由链接 -->
  <NuxtLink to="/">首页</NuxtLink>
  <NuxtLink to="/video">视频页</NuxtLink>
  <!-- 页面路由 -->
  <NuxtPage />
</template>

• 页面路由

        <NuxtPage>相当于<RouterView>

• 页面跳转

        <NuxtLink>相当于<RouterLink>

SEO优化

通过设置网页 title 和 description 等 SEO 优化信息，由服务端渲染，可提高网页在搜索引擎结果页面中的排名和可见性 。 

<script setup lang="ts">
// SEO 优化信息
useSeoMeta({
  // 网站标题
  title: '哔哩哔哩 (゜-゜)つロ 干杯~-bilibili',
  // 网站描述
  description:
    'bilibili是国内知名的在线视频弹幕网站，拥有最棒的ACG氛围，哔哩哔哩内容丰富多元，涵盖动漫、电影、二次元舞蹈视频、在线音乐、娱乐时尚、科技生活、鬼畜视频等。下载客户端还可离线下载电影、动漫。',
  // 搜索关键词
  keywords: 'B站,bilibili,哔哩哔哩,哔哩哔哩动画,动漫,电影,在线动漫,高清电影',
})
</script>

@vant/nuxt 组件库

按照和配置

• 安装 nuxt 版 vant-ui

npm i @vant/nuxt

• 添加配置

// nuxt.config.ts
export default defineNuxtConfig({
  // 调试工具
  devtools: { enabled: true },
  // 应用模块
  modules: ['@vant/nuxt'],
})

• 使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

 PS： 在 Nuxt 项目中，vant 组件会自动按需导入（需重启服务）。

 四、未完待续...