Nuxt3哔哩哔哩移动端项目实战

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

在线预览

https://bilibili.megasu.top/

直播收获

完成带数据交互的 哔哩哔哩移动端 项目，包括以下知识点的实战应用。

• SEO 优化
• 基于文件的路由系统
• 自动导入
• Nuxt DevTools 调试工具
• 自定义组件
• @vant/nuxt 组件库
• 移动端 vw 适配
• 接口服务器
• 数据获取
• 分页加载
• 动态路由传参
• 项目打包上线

• 电脑系统 - Windows 10
• 开发工具 - VS Code (需安装 Volar 扩展插件)
• Node.js - v16.15.0
• Npm - 9.4.0
• Nuxt - 3.6.5

Nuxt 官网 https://nuxt.com/

初始化命令

其中 换成自己的项目名称。

下载问题

由于国内访问受限，通过命令行下载可能会失败。

解决方案参考：修改 host 文件

Windows 系统

映射关系为访问 映射到 IP 地址 。

Mac 系统

参考链接：

• Windows 修改 hosts
• Mac 修改 hosts
• 手动下载地址

运行项目

1. 进入项目目录，并安装项目依赖 。
2. 启动项目，。
3. ✨ 浏览器访问 http://localhost:3000

服务端渲染

SPA 和 SSR 是什么

• SPA（Single Page Application）单页面应用，在客户端通过 JS 动态地构建页面。
• SSR（Server-Side Rendering）服务器端渲染，在服务器端生成 HTML 页面并发送给客户端。

有什么不同？

• SPA 的特点是页面切换流畅，动态渲染变化的部分，用户体验好，但是对搜索引擎的支持不够友好。
• SSR 的特点是对搜索引擎友好，可以提高页面首次加载速度 和 SEO，但是页面切换可能不够流畅，因为每次都是请求一个完整的 HTML 页面。

Nuxt 框架优势

• Nuxt 采用了混合的架构模式，同时支持 SSR 和 SPA。
• SSR 服务端渲染： 首次访问页面 ，Nuxt.js 在服务器端执行 Vue 组件的渲染过程，并生成初始 HTML。
• SPA 客户端激活：一旦初始 HTML 被发送到浏览器，Vue.js 会接管页面，后续的页面切换则使用 SPA 的方式进行。
• Nuxt 框架优势：兼顾了 SSR 和 SPA 的优点。

适用场景

企业网站、商品展示 等 C 端网站，对 SEO 搜索更友好，且页面切换流畅，用户体验更好。

开启或关闭服务端渲染

Nuxt 默认开启 SSR 服务端渲染，推荐开启，从而兼顾了 SSR 和 SPA 的优点，也利于 SEO 搜索引擎优化。

目录结构

我们先来认识 Nuxt3 项目的目录结构。

案例练习

nuxt 有一些约定的目录，有特殊功能，如 pages 目录的 vue 文件会自动注册路由。

Nuxt.js 自带基于文件的路由系统，无需安装 vue-router，无需额外配置。

参考目录

参考代码

• 页面路由 相当于
• 页面跳转 相当于

项目资料

• 在线体验
• 参考代码

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

参考链接：

• SEO 和 Meta

按照和配置

• 安装 nuxt 版 vant-ui

• 添加配置

• 使用

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

修改主题色

在 app.vue 的样式全局生效。

参考链接

• vant-nuxt
• vant 样式变量

安装依赖

添加配置

参考文档：

• nuxt 配置 - postcss
• vant 进阶用法 - postcss

素材和样式准备

拷贝素材中的 目录项目中，包含项目所需的图片、基础样式、字体图标。

下载安装 sass

项目中导入基础样式和字体图标。

静态结构

组件封装

基于首页的静态结构，抽离到 目录。

• 头部组件

• 视频组件

抽离到 目录的组件可自动导入，在首页、视频详情页中直接使用即可，页面也变得更简洁。

参考链接

• components 目录

Nuxt 支持在 目录写服务器接口，用于数据请求。

为了让大家更好地了解 Nuxt 接口服务器，我们仅提供了静态数据，但这个 目录可以用于对接数据库等更复杂的操作。这样，您可以通过编写自定义的服务器接口来满足项目的需求。

频道接口

静态数据

频道接口

Nuxt 基于文件生成接口，在 目录下的 ，会自动生成接口 ，请求方式为 。

可通过 http://localhost:3000/api/channel 访问以上频道接口， 文件名的后缀可以是 , , , 等，以匹配请求的 HTTP 方法 。

参考资料：

• server 目录

渲染频道列表

• 通过 useFetch 发送请求

获取频道列表数据

渲染数据

视频列表接口

静态数据

视频列表接口

动态渲染视频

获取视频列表数据

v-for 循环展示

参考链接：

• utils 目录

分页组件

通过 vant-list 列表 实现滚动触底，加载分页数据。

滚动触底，触发 onLoad 事件，加载完成，处理 finished 结束。

类型处理

指定正确的 TypeScript 类型可以让项目更安全，在 VS Code 中可通过 插件，快速基于 JSON 生成 TS 类型声明文件。

类型声明文件

类型升级

跳转路由传参

修改面经详情的目录结构

点击跳转

页面中获取参数

视频详情接口

代码实现

没有做页面缓存的话，切换页面时会重新发送请求，用户体验不友好，开启 keepalive 优化体验。

• NuxtPage 开启 keepalive
• keepalive issues

nuxt 脚手架只是开发过程中，协助开发的工具，当真正开发完了 => 脚手架不参与上线

参与上线的是 => 打包后的源代码

打包：

• 语法解析，ts 解析成 js，scss 解析成 css 等
• 代码分割，代码压缩，tree-shaking （树摇）
• …

打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！

打包命令

nuxt 脚手架工具已经提供了打包命令，直接使用即可。