[Vue] mksz566-Vue3+Nuxt3打造SSR网站应用,0到1实现服务端渲染[6章]

[复制链接]
online_admin aixure 发表于 2022-4-9 16:12:52 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
161215e6btmtsjjzhahuts
售 价: ¥25¥328加入会员,免费下载
库 存:9996
销 量:15
源 址:
卖家服务:  
客 服:QQ(早10点-晚6点)
资源详情
【课程介绍】
服务端渲染(SSR)可以说是大型网站的标配,也是每一个想要进阶的前端开发必会的技能,而Nuxt.js的出现,则让一切都变得更简单。 本课程带你从0到1实现一个SSR网站应用,全面应用Vue3等前端最新技术栈,通过对SPA应用的两次改造,帮你彻底掌握服务端渲染的实现原理!
【课程目录】
  • 第1章 课程介绍 试看1 节 | 15分钟

    本章中,将会对课程的内容做介绍说明,总览课程中涉及到的知识点和学习方向。

    [url=]收起列表[/url]
    • 视频:1-1 课程介绍 (14:39)试看

  • 第2章 从0搭建一个项目脚手架5 节 | 36分钟

    从0配置开发环境并初始化项目脚手架

    [url=]收起列表[/url]
    • 视频:2-1 本章导学 (01:44)
    • 视频:2-2 开发环境配置 (08:18)
    • 视频:2-3 nvm对 node 进行版本管理 (09:21)
    • 视频:2-4 vite脚手架初始化项目 (14:08)
    • 视频:2-5 本章小节 (02:19)

  • 第3章 项目实战 — 【打造一个完整高效的前端项目】9 节 | 92分钟

    渐进式地构建前端项目,开箱即用,与三方类库实现高内聚低耦合,打造高效的开发体验,方便项目后期升级以及其他技术型改造。

    [url=]收起列表[/url]
    • 视频:3-1 本章导学 (01:31)
    • 视频:3-2 前端项目技术选型 (04:56)
    • 视频:3-3 集成vue-router4 — 路由的基本使用 (17:03)
    • 视频:3-4 集成element-plus—按需引入组件,构建轻量应用 (14:20)
    • 视频:3-5 集成ESLint—规范你的前端代码 (11:51)
    • 视频:3-6 集成Sass样式预处理器—高效管理前端样式 (10:18)
    • 视频:3-7 集成axios请求库—对axios的TS封装-1 (12:39)
    • 视频:3-8 集成axios请求库—对axios的TS封装-2 (13:58)
    • 视频:3-9 本章小节 (04:33)

  • 第4章 项目实战 —【优雅地实现Vue3网站应用的国际化】4 节 | 26分钟

    学会如何整站国际化,做好网站的多种语言版本。

    [url=]收起列表[/url]
    • 视频:4-1 本章导学 (01:58)
    • 视频:4-2 Element-plus配置国际化——让你的网站更有“国际范” (08:05)
    • 视频:4-3 vue-i18n实现网站全局国际化 (12:59)
    • 视频:4-4 本章小节 (02:52)

  • 第5章 项目实战 — 【采用indexedDB存储方案自建本地Mock体系】6 节 | 84分钟

    掌握indexedDB的API和使用方法,解决前端缓存大量数据的问题,丰富客户端的数据查询方式。

    [url=]收起列表[/url]
    • 视频:5-1 本章导学 (01:51)
    • 视频:5-2 IndexedDB数据存储方案 (05:58)
    • 视频:5-3 开天辟地之数据库与对象仓库objectStore创建 (24:17)
    • 视频:5-4 使用Typescript封装工具类:增、删、改、查 (25:03)
    • 视频:5-5 使用Promise、async、await包装异步事务,自建一套本地Mock体系 (23:59)
    • 视频:5-6 本章小节 (02:36)

  • 第6章 项目实战番外篇 — 【SSR方案初探】3 节 | 40分钟

    nuxt3 beta版本尝尝鲜,初识vue3服务端渲染的整体思路。

    [url=]收起列表[/url]
    • 视频:6-1 本章导学 (02:52)
    • 视频:6-2 CSR、SSR以及同构渲染的区别 (16:16)
    • 视频:6-3 先用Nuxt3 beta版本实现一个SSR来尝尝鲜 (20:47)

  • 第7章 项目实战 —【Layout组件封装】7 节 | 95分钟

    学会封装公共组件以及对三方组件的二次封装,减少代码冗余,提高组件复用性。

    [url=]收起列表[/url]
    • 视频:7-1 本章导学 (01:06)
    • 视频:7-2 headerCommon组件封装—在script-setup中使用defineEmits父子组件传参 (30:51)
    • 视频:7-3 国际化的相关Mock接口介绍 (05:56)
    • 视频:7-4 头部组件国际化:调用Mock接口实现国际化语言切换 (13:50)
    • 视频:7-5 底部组件封装:使用Sass的@mixin指令封装Flex布局 (22:39)
    • 视频:7-6 实现Layout组件文案国际化及语言包字段的维护 (16:34)
    • 视频:7-7 本章小节 (03:25)

  • 第8章 项目实战 —【对SPA的第一次SSR改造:实现服务端渲染的基本架构】17 节 | 201分钟

    实现路由登录拦截,防止未登录用户进入页面;对SPA应用进行首次改造,实现前后端同构,后端直出静态页面。

    [url=]收起列表[/url]
    • 视频:8-1 本章导学 (01:45)
    • 视频:8-2 登录页基础布局搭建 (23:21)
    • 视频:8-3 登录页国际化字段维护 (11:14)
    • 视频:8-4 登录页的相关Mock接口介绍:使用Typescript类型别名规范objectStores属性 (07:14)
    • 视频:8-5 登录模块之hook函数封装:登录、注册、登出功能实现【上】 (23:34)
    • 视频:8-6 登录模块之hook函数封装:Vue3中的hook概念【中】 (03:11)
    • 视频:8-7 登录模块之hook函数封装:抽离出两个hook函数实现代码重构【下】 (15:01)
    • 视频:8-8 使用Vuex4共享全局状态:实现跨组件通讯【上】 (15:10)
    • 视频:8-9 使用Vuex4共享全局状态:统一管理网站登录状态、国际化状态【中】 (12:32)
    • 视频:8-10 使用Vuex4共享全局状态:结合Typescript实现类型声明【下】 (10:31)
    • 视频:8-11 Vite、Vue3、TS、SSR的基本原理、构建步骤、目录结构 (06:27)
    • 视频:8-12 对SPA的第一次SSR改造:新建客户端入口、封装工厂函数CreateApp()【上】 (07:29)
    • 视频:8-13 对SPA应用的第一次SSR改造:新建服务端入口、开启本地环境Node服务-1【中】 (14:18)
    • 视频:8-14 对SPA应用的第一次SSR改造:新建服务端入口、开启本地环境Node服务-2【中】 (11:37)
    • 视频:8-15 对SPA应用的第一次SSR改造:设置运行指令开启生产环境Node服务-1【下】 (14:46)
    • 视频:8-16 对SPA应用的第一次SSR改造:设置运行指令开启生产环境Node服务-2【下】 (16:59)
    • 视频:8-17 本章小节 (05:24)

  • 第9章 项目实战 —【对SPA的第二次SSR改造:客户端结合服务器端实现Hydrate】12 节 | 193分钟

    从0到1将SPA改造成SSR项目,前端vuex缓存服务端数据,手动封装aysncData异步函数从后端抓取数据渲染前端页面。

    [url=]收起列表[/url]
    • 视频:9-1 本章导学 (01:24)
    • 视频:9-2 实现首页Flex布局 (20:07)
    • 视频:9-3 第二次SSR改造的基本步骤 (04:26)
    • 视频:9-4 【起】对SPA应用的第二次SSR改造:封装asyncData函数实现服务端数据预取 (14:30)
    • 视频:9-5 【起】对SPA应用的第二次SSR改造:封装asyncData函数实现服务端数据预取-2 (17:43)
    • 视频:9-6 【承】对SPA应用的第二次SSR改造:Vuex接管状态并同步到客户端 (17:57)
    • 视频:9-7 【转】对SPA应用的第二次SSR改造:防止客户端二次预取数据 (23:28)
    • 视频:9-8 【合】对SPA应用的第二次SSR改造:使用ssr-manifest.json渲染预加载指令 (29:24)
    • 视频:9-9 公共组件Pagination封装:实现首页列表数据分页加载-1 (14:31)
    • 视频:9-10 公共组件Pagination封装:实现首页列表数据分页加载 (20:19)
    • 视频:9-11 首页模块组件HomeTabs拆分:实现首页列表数据城市筛选 (12:04)
    • 视频:9-12 本章小节 (17:05)

  • 第10章 项目实战 —【房屋租赁详情页的服务端渲染】

    提供一种比Loading视觉效果更好的方案:骨架屏预渲染,预估页面结构,让用户有更好的体验感。


  • 第11章 项目实战 —【订单中心模块的异步封装、历史足迹模块的骨架屏渲染】

    经典面试题考点:圣杯布局详解,以极简方式布局页面;使用封装好的Mock体系轻松存储前端大量数据,减少http请求,缓解服务端压力。


  • 第12章 项目实战 —【全方位分析网站优化的方案与建议】

    掌握优化网站用户体验的各种技巧,多维度分析页面性能,对症下药,逐步优化。


  • 第13章 如何将一个SSR项目成功部署上线

    搞清前端项目上线整体流程,掌握项目部署技能,将一个基于vue3的SSR项目发布生产。


  • 第14章 课程总结

    回顾课程,总结重点。



温馨提示:
1、如果下载地址失效,请尽快反馈给我们,我们尽快修复。点此反馈>>
2、全站资源高清无密,课程百分百高清,完整,原画,包含所有的视频+素材+课件+源码,官方同步体验!每天更新,成为vip后可免费下载本站IT课程。点此办理会员>>
3、有任何问题,请咨询QQ:87887023
4、支持7*24小时自助购买,购买后自动发货,链接永久有效,自动更新
回复

使用道具 举报

精彩评论2

plugin
online_1_1 Conaboo 发表于 2022-4-25 13:53:36 | 显示全部楼层
课程才到第六章,该更新啦
回复

使用道具 举报

plugin
online_1_1 乡子 发表于 2023-6-29 20:19:09 | 显示全部楼层
解压码多少
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

专注资源整合与知识分享
客服QQ

87887023

周一至周日9:00-23:00

反馈建议

点此进行反馈 kfs 在线QQ咨询
ftqrcode

扫描二维码关注我们

label_sm_90020

Powered by 优百课栈 X3.4© 2019-2025