☕️ 您可以通过以下链接订阅我们的频道以支持我们：https://www.youtube.com/channel/UC3YgTINPYQmUcRt5ZcNFIZQ/join 欢迎来到 Vue Firebase masterclass 系列的第 6 集。在这一集中，我们将介绍 Tailwind 和 DaisyUI，它们是什么，它们如何提供便利，以及为什么我要在这个项目中使用这两个技术。同时，我们将使用 tailwind 和 daisyUI 来美化 Todo list 的样式。** 如果您直接观看此 Session 并想要 Todo list 的代码部分，请创建一个新项目并按照此文档查看 Todo List 代码：https://docs.mikelopster.dev/c/vue-firebase/chapter-5/workshop 章节 00:00 Session 介绍 00:31 Tailwind 介绍 08:04 在 Todo List 项目中安装 Tailwind 11:40 Tailwind 核心概念介绍 (utility class) 13:00 Tailwind - 1. 布局 18:04 Tailwind - 2. Flexbox & Grid 20:29 Tailwind - 3. 间距 22:55 Taliwind - 4. 尺寸 23:46 Tailwind - 5. 排版 26:12 Tailwind - 6. 背景 27:18 Tailwind - 7. 边框 28:29 Tailwind - 8. 效果 29:14 Tailwind - 9. 过滤器 30:11 Tailwind - 10. 表格 30:48 Tailwind - 11. 转换和过渡 31:13 Tailwind - 处理悬停、焦点、状态 31:50 Tailwind - 12. 响应式 33:44 Tailwind 自定义和 Directive (group class) 37:40 Daisy UI 介绍 (Tailwind 插件) 39:21 在 Todo List 项目中安装 DaisyUI 40:26 DaisyUI 组件 - 1. 动作 42:14 DaisyUI 组件 - 2. 数据展示 43:45 DaisyUI 组件 - 3. 数据输入 45:08 DaisyUI 组件 - 4. 布局 46:06 DaisyUI 组件 - 5. 导航 47:30 DaisyUI 主题介绍 49:11 开始美化 Todo List 概述要做什么 49:28 修改 App.vue 中的大布局 51:30 美化 HomeView - 按照 checklist / 开始排列输入框 53:11 美化 HomeView - 美化 todo 列表视图 57:25 美化 HomeView - 添加复选框和 'Done' 状态样式 1:01:42 美化 HomeView - 添加 Loading 组件 1:06:05 美化 HomeView - 添加用于分离状态的 tab 和 computed 分离状态 1:11:43 美化 EditView - 调整输入框页面样式 1:15:20 美化 EditView - 添加返回按钮 1:16:45 美化 EditView - 添加 Loading 1:17:10 美化 EditView - 添加 Toast (用于提示更新已完成) 1:19:17 Recap 我们做了什么 1:20:17 我们将在接下来的 2 个 Session 中做什么 如果您想按照文档进行操作，可以在这里阅读：https://docs.mikelopster.dev/c/vue-firebase/chapter-6/intro 如果您有任何疑问，欢迎在 Facebook page 上交流：https://#/mikelopster.dev Website: https://mikelopster.dev 背后物品坐标 : https://shope.ee/8A54c8cfkf