黑马前端Nuxt3原理到实战视频教程，nuxt构建B站哔哩哔哩移动端项目
https://www.bilibili.com/video/BV1Wo4y1h7of nuxt 1x 2x-old-same-h-search-look pay-zfbx-wxx x 4x
https://www.bilibili.com/video/BV1u84y1R7d1 1
https://bilibili.megasu.top
https://github.com/Megasu/bilibili-nuxt3
https://gitee.com/Megasu/nuxt-bilibili
uxt Е&&供7一#于 Node.js RB渲案 SSE（Server Side Rendering）
器端进行渲染，从而提高页面的加载速度和SEO.
可以让 Vue 应用在服
直播互动
直播收获
完成带数据交互的 哔哩哔哩移动端 项目，包括以下知识点的实战应用。
SEO 优化
基于文件的路由系统
自动导入
I Nuxt DevTools 调试工具自定义组件
@vant/nuxt 组件库
移动端 vw 适配
接口服务器
数据获取分页加载
动态路由传参项目打包上线
电脑系统-Windows 10
开发工具-VS Code（需按照 Volar 扩展插件）
Node.js-v16.15.0
Npm-9.4.0
Nuxt-3.6.5
npx nuxi@latest init
https://nuxt.com/docs/getting-started/introduction
服务端渲染
SPA 和 SSR 是什么
SPA（Single Page Application）单页面应用，在客户// nuxt.config.ts端通过 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的优点。1
// nuxt.config.ts ssrbool
[id].vue new
_id.vue old
<！--首页 index/index.vue-->
<NuxtLink to="/">首页</NuxtLink><NuxtLink to="/">首页</NuxtLink>
<！--Nuxt 页面路由，相当于 RouterView
<NuxtPage/>
I
nuxt 有一些约定的目录，有特殊功能，如 pages 目录的 vue 文件会自动注册路由。
pages页面日录，自动注册路出
Nuxt.js 自带基于文件的路由系统，无需安装"vue-router，无需额外配置。
页面路由
页面跳转
SEO 优化
通过设置网页 title 和 description 等 SEO 优化信息，由服务端渲染，可提高网页在搜索引擎结果页面中的排名和可见性。
useSeoMeta
//避免 B 站图片防盗链
referrer：'no-referrer'
referrer：'no-referrer'
安装 nuxt 版 vant-ui
后台不会用nuxt
企业官网...v
// get /api/channel
server/api/channel.ts
server/api/channel.get.ts
await useFetch('/api/hello') 直接用 不用导入
分页加载
onLoad(())
沉浸式翻译 0.7.12 crx
组件也不用引入 直接用
vant有弹幕组件
14
15
16
pnpm genrate html页面多 静态文件
nuxt 脚手架工具已经提供了打包命令，直接使用即可。
生成用于服务器端运行的优化代码
pnpm build
生成静态网站，将应用程序预渲染成静态 HTML 文件，无需服务器端渲染pnpm generate I
部署上线
部署公司的服务器
部署到第三方平台，如：vercel（免费）
https://vercel.com/
nuxt mock
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({// 应用模块modules: ['@vant/nuxt', '@vueuse/nuxt'],// 调试工具devtools: { enabled: true },// 移动端适配postcss: {plugins: {'postcss-px-to-viewport': {viewportWidth: 375,},},},
})
