标签: 视频教学

  • 【视频教程】技术栈大升级:Vue3 到 Nuxt3(4)深入理解 SSR 和 `useAsyncData`

    【视频教程】技术栈大升级:Vue3 到 Nuxt3(4)深入理解 SSR 和 `useAsyncData`

    2023 年,我个人最大的变化,是从 Vue3 SPA 应用向 Nuxt3 SSR 应用过渡,在预期可能存在 SSR 需求的项目中,都尽量使用 SSR。包括 React 应用,也尽量使用 Next.js,而不是 React SPA。

    这个过程中,面临很多问题,很多思路需要转换,很多以前没关注的点需要关注。本系列视频试图快速教会大家这些要点,帮助大家顺利从 SPA 切换到 SSR。

    这次的视频更偏理论,重点讲解 Nuxt3 如何处理 useAsyncData,以及为了兼顾 SSR 和前端开发所做的渲染策略设计。这部分知识我其实很晚才掌握,因为文档里说的也不太详细;所以既是好消息也是坏消息。好消息是,哪怕你没有掌握,也不太耽误使用 Nuxt3 开发项目;坏消息是,保不齐就会遇到一些奇怪的问题,难以复现和排错。

    视频要点:

    1. 现代化 SSR 的优势
    2. 深入理解 useAsyncData
    3. 使用 Pinia 传递数据
    4. 理解生命周期钩子变化

    如果你对 Vue3 开发、Nuxt3 开发、SSR 感兴趣,欢迎关注我的本系列。如果你对这些话题有疑问,欢迎留言讨论。

  • 【视频教程】技术栈大升级:Vue3 到 Nuxt3(2-3)升级实战 – 基础知识,适配 SSR,页面路由

    【视频教程】技术栈大升级:Vue3 到 Nuxt3(2-3)升级实战 – 基础知识,适配 SSR,页面路由

    2023 年,我个人最大的变化,是从 Vue3 SPA 应用向 Nuxt3 SSR 应用过渡,在预期可能存在 SSR 需求的项目中,都尽量使用 SSR。包括 React 应用,也尽量使用 Next.js,而不是 React SPA。

    这个过程中,面临到很多问题,很多思路需要转换,很多以前没关注的点需要关注。本系列视频试图快速教会大家这些要点,帮助大家顺利从 SPA 切换到 SSR。

    继上次的知识科普视频之后,我们开始实战。连续三次直播都比较失败,所以更新比较慢。第二期视频包含以下升级要点:

    1. 处理项目开发脚手架
    2. 迁移静态资源
    3. 修改引用地址
    4. 利用 process.client<client-only> 组件处理不能 SSR 的功能
    5. 处理 TailwindCSS
    6. 使用 useCookie 替代 localStorage

    第三期视频包含以下要点:

    1. 处理页面路由,理解页面嵌套
    2. 全局使用 css
    3. 附赠内容(拖时长):关于读源码

    后面应该还会再录制两期,分别是:服务器 API 开发;深入理解 SSR 与 useAsyncData+Pinia。

    如果你对 Vue3 开发、Nuxt3 开发、SSR 感兴趣,欢迎关注我的本系列。如果你对这些话题有疑问,欢迎留言讨论。

  • 【视频】技术栈大升级:Vue3 到 Nuxt3(1)基础知识篇

    【视频】技术栈大升级:Vue3 到 Nuxt3(1)基础知识篇

    2023 年,我个人最大的变化,是从 Vue3 SPA 应用向 Nuxt3 SSR 应用过渡,在预期可能存在 SSR 需求的项目中,都尽量使用 SSR。包括 React 应用,也尽量使用 Next.js,而不是 React SPA。

    这个过程中,面临到很多问题,很多思路需要转换,很多以前没关注的点需要关注。本系列视频试图快速教会大家这些要点,帮助大家顺利从 SPA 切换到 SSR。

    本期视频主要介绍 SSR 所需的知识和概念,为下一阶段正式重构项目做准备。

    1. 什么是 SSR?为什么要用 SSR?
    2. SSR 的一般构成
    3. Nuxt3 的 SSR 组件
    4. Nuxt3 的渲染规则与缓存处理
    5. 如何鉴别用户身份

    视频中的课件:从 SPA 到 SSR,从 Vue3 到 Nuxt3

    有任何问题、意见、建议,欢迎留言弹幕私信与我交流。如果你觉得视频对你有所帮助,还请留下宝贵的一键三连,并完播分享,谢谢。

  • 设计并实现自动生成前端编程教学视频的小语言(一 想法篇)

    设计并实现自动生成前端编程教学视频的小语言(一 想法篇)

    我一直想把录制教学视频的过程变得更稳定可控,而不需要依赖一时的状态。后者常常受到各种影响:比如家里狗叫了、孩子闹了、邻居装修了;或者录到一半突然遇到调不通的 bug;又或者只有 10分钟想录一段,但找不到感觉;等等。

    好处

    加入我厂后,见识到各种小语言的威力;另一方面,计算机语言经过祛魅,我也不觉得有多难实现。所以我希望能够把录制教学视频的过程语言化,这样会带来几个好处:

    1. 想写就写:哪怕只有几分钟,写上一个小节,或者修改几个错字,都可以;
    2. 想录就录:直接在服务器上生成,不需要考虑周围环境;
    3. 方便多语言:文字翻译后,重录生成其它语言即可;
    4. 方便修改和升级:大部分错误都是口误,或者细节出入,从头录必然不合适,目前来看大部分视频都通过字幕处理。而语言重新录制一遍即可;想补充内容,也很容易,尤其是 API 或者最佳实践变化,需要修改大小 N 处,从语言生成就更具优势。
    5. 方便输出不同分辨率:不需要剪辑,只要重复录制多次,就可以生成横竖屏下的高质量视频,无需人工值守

    技术环境与选择

    能够实现这个小语言,自然需要依靠整个技术环境的成熟与健全。大概有这么几项:

    语音合成

    语音合成(TTS)经过 AI 加成,效果相较于过去提升不少,足够为用户接受。再加上难度不大,所以支持的平台很多,价格也不贵,随便选一家即可。

    录屏

    首先可以选择 OBS。除了 UI 之外,它也提供 API,不过语言只有 Python 或 Lua,我都不是很熟。用它的好处是支持场景配置,我们可以先配好几组场景,然后在需要的地方切换。

    如果是 macOS 可以使用 aperture-node,它借助 macOS 的原生 API 实现录屏,性能非常好。不过兼容性不行,考虑到新推出的 M1 芯片性能好功耗低,买一台 Mac mini 专门用来跑生成也不错。

    也可以选择 ffmpeg,好处是什么平台都能跑,坏处是什么平台都一般。

    效果演示

    有 webpack-dev-server 在,效果演示不成问题。

    代码编写

    目前最大的挑战就在这里——我还不太确定怎么实现代码的自动输入。初步考虑使用 AppleScript 配合 VSCode,如果不行的话就浏览器里跑 VSCode online,然后用 JS。

    基础设计

    1. 既然要做教学视频(tutorial),我又很喜欢东南亚,那么语言就叫 tutolang 吧,tuto = 拖拖车,便宜又方便。
    2. 因为最终的目的是生成视频,所以它应该是个声明式语言
    3. 语言教程不能只从上到下顺代码,得能够找到特定位置输入代码然后讲解。这个部分考虑再三之后通过 git 来做最为简单直接。
    4. 目前来看,从前端三个语言的角度生成视频应该是问题不大,后面如何整合其它视频过程需要再考虑。

    其它

    语言本身肯定要开源,编译器计划也直接 MIT,随便用。然后提供一组自动化的编辑、生成、转码的基础设施,作为服务收费。