标签: nuxt3

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发(3):实现投票效果,使用 Redis

    【视频】Nuxt3+Vercel+Serverless 全栈开发(3):实现投票效果,使用 Redis

    课程继续。仍然结合近期的开发经验,分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    本次课程内容:

    • CSS 里使用 ~ 兄弟选择器实现投票效果
    • 使用 Upstash Redis
    • 使用 Nuxt3 风格的加载方法读取数据

    打分组件,我们需要用到 ~ 选择器选择某个节点后面的所有弟弟节点,配合蒙版属性 mask-* 可以实现我们要的打分效果。

    接下来我们开始接触远程数据的操作。Vercel 免费版 Redis 每天只有 1k 的请求数,不太够用;如果升级付费版,也没法针对某个部分单独升级。所以很明显,Upstash 这样专门的服务商更合适。

    Nuxt3 为实现 SSR,对远程请求进行了封装,提供 useFetchuseLazyFetchuseAsyncDatauseLazyAsyncData 这 4 个新方法。其中前两者可以视作后两者的封装。在本节课里,我们先实现了读取数据的 API,然后用 useFetch 加载数据,实现服务器端渲染。

    这期视频也剪得很细,还做了字幕,希望大家能学到东西。

    如果你有任何问题、建议,欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连,谢谢大家。

    另外,我也在 YouTube 上上传了一份,大家有空的话,麻烦帮忙关注下我的油管频道,感谢感谢。肉山全栈小课堂 – YouTube

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发(2):配置 TailwindCSS,使用 grid 布局

    【视频】Nuxt3+Vercel+Serverless 全栈开发(2):配置 TailwindCSS,使用 grid 布局

    课程继续。仍然结合近期的开发经验,分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    本次课程内容:

    • 配置 TailwindCSS
    • 使用 grid 布局构建页面

    Nuxt3 为支持 SSR,架构要复杂很多,所以大部分组件都要专门适配,比如 pinia,就有 @nuxt/pinia;vue-i18n,也有 @nuxt/i18n。同时,大部分组件的配置也都要归拢到一起,所以使用的时候一般要特意找一下,配一下。

    由于界面布局的因素,使用 flex 需要多一个容器,于是我干脆使用了 display:grid,这样代码会更简单。可能大家平时用 grid 不多,所以不妨从这个小项目入手。

    这次视频剪得比较细,字幕也做了,希望大家能学到东西。

    如果你有任何问题、建议,欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连,谢谢大家。

    另外,我也在 YouTube 上上传了一份,大家有空的话,麻烦帮忙关注下我的油管频道,感谢感谢。肉山全栈小课堂 – YouTube

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发(1):技术选型介绍,项目基础搭建

    【视频】Nuxt3+Vercel+Serverless 全栈开发(1):技术选型介绍,项目基础搭建

    大家好,时隔小半年,我又来做系列视频了。这次计划结合近期的一些开发经验,分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    这套技术方案大约是这样:

    • Nuxt3
      • 提供 Vue 开发环境
      • 提供服务器渲染 SSR 能力
      • 提供 API 环境
    • Vercel
      • 提供部署环境和各项网站能力
      • 提供 Edge Function 和各种存储
      • 提供全球化服务能力
      • 提供 SSL
      • 免费额度足够用很久
    • Upstash
      • 提供 Redis
      • 免费额度足够用很久
      • 付费也不贵
    • TiDB Cloud Serverless
      • 云数据库,MySQL 兼容 API
      • HTTP endpoint
      • 免费额度足够用很久
    • 其它
      • Nuxt- i18n
      • TailwindCSS
      • DaisyUI
      • GitHub
      • pnpm

    使用这套技术方案,可以应对绝大多数网站需求,部署在全球化网络里,使用丰富的免费资源。云原生会带来天生的高可用性、鲁棒性、伸缩性。

    这是第一次分享,详细介绍了这套技术选型,nuxt3 项目的基础搭建,和它自带的路由、服务器 API 系统。

    这次会把每次的分享压缩到 25~30 分钟,降低观看门槛。

    如果你有任何问题、建议,欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连,谢谢大家。

    另外,我也在 YouTube 上上传了一份,大家有空的话,麻烦帮忙关注下我的油管频道,感谢感谢。肉山全栈小课堂 – YouTube