- 博客(168)
- 资源 (3)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Dad Jokes（冷笑话卡片）
构建了一个轻量化的DadJokes组件，通过调用icanhazdadjoke.com的免费API实现随机冷笑话展示。技术亮点包括：1️⃣ 使用Vue3的<script setup>语法 + ref响应式数据管理2️⃣ 采用fetch异步请求API，配置JSON响应头3️⃣ TailwindCSS快速构建居中卡片布局，包含标题区、笑话展示区和交互按钮4️⃣ 实现自动初始化加载+按钮点击刷新双交互模式组件适用于仪表盘趣味模块、等待页减压场景等，代码已开源在50-vue-projects仓库。
2025-06-03 21:28:14
210
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Sound Board（音响控制面板）
通过Vue3组合式API+原生DOM操作开发了一个响应式SoundBoard组件。核心功能包括：点击按钮播放对应音效、自动停止其他音频、Tailwind CSS实现悬停动画。
2025-06-02 22:19:32
1146
2
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Form Wave（表单label波动效果）
该组件使用Vue3和TailwindCSS构建，主要特点是实现了带浮动标签动画的输入框交互体验。通过v-model双向绑定和focus/blur事件控制标签的浮动动画，当输入框获得焦点或已有内容时，标签会以波浪动画效果上浮并变色。
2025-06-02 22:09:08
948
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Split Landing Page（拆分展示页）
本文介绍了一个基于Vue 3的Split Landing Page组件，通过鼠标悬停实现动态分屏效果：- 核心功能左右面板初始各占50%宽度悬停时当前面板扩展至75%，另一侧收缩至25%鼠标离开恢复均等分屏- 技术实现使用Vue响应式变量(activePanel)控制状态结合Tailwind CSS实现动态类名切换通过transition实现700ms平滑动画效果双层绝对定位实现背景图+半透明遮罩
2025-05-29 21:29:52
859
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ScrollAnimation （滚动动画）
利用Vue和TailwindCSS实现滚动触发动效。通过IntersectionObserver API监听元素进入视口，结合Vue的响应式特性和Tailwind的动态类绑定，实现了内容块从两侧滑入的动画效果。
2025-05-26 22:03:59
324
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Blurry Loading （毛玻璃加载）
通过 Vue3 和 Tailwind CSS 实现一个加载进度条，背景图像随加载进度从模糊变清晰，并显示当前加载百分比。技术实现包括 Vue3 的响应式状态管理、生命周期钩子管理定时器，以及 Tailwind CSS 的布局类和动态样式绑定。组件代码展示了如何通过 ref 变量和定时器动态调整模糊效果和加载进度。
2025-05-22 21:04:17
1684
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Hidden Search Widget （交互式搜索框）
通过 Vue3 和 TailwindCSS 实现一个点击按钮展开/收起搜索框的交互效果。文章详细讲解了组件的技术实现点，包括 Vue3 的 ref 状态管理、TailwindCSS 的过渡动画与布局类，以及条件样式绑定的应用。
2025-05-21 22:09:36
1126
1
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Rotating Navigation （旋转导航）
点击按钮后，页面整体旋转并展示侧边菜单，菜单项带有滑入效果，按钮提供“展开/关闭”两种状态。技术实现上，使用 ref 管理菜单状态，Tailwind CSS 处理旋转、位移、过渡等动画效果。组件内嵌头部内容模拟文章展示，左侧导航通过 translate-x 控制显隐。
2025-05-20 21:57:02
1055
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Progress Steps （步骤条）
组件通过 Vue 的 Composition API 和 ref 进行响应式状态管理，使用 v-for 渲染步骤列表，并利用 Tailwind CSS 的实用工具类实现动态样式和过渡效果。组件提供了“上一页”和“下一页”按钮，用户可以控制步骤的前进和后退，进度条的长度和步骤样式会动态更新。文
2025-05-19 22:02:26
884
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Expanding Cards （展开式卡片）
Expanding Cards组件通过Vue3的响应式状态ref和v-for指令动态渲染一组横向排列的背景卡片，点击某张卡片时，该卡片会展开至主要区域，其他卡片则收缩。
2025-05-18 15:46:50
1998
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 页面布局 与 Vue Router 路由配置
项目包含四个主要模块：导航栏（Nav）、首页（Home）、项目展示（Projects）和关于页面（About）。通过创建组件结构，项目实现了基础导航与页面路由体系。代码示例展示了 Nav.vue、Home.vue 和 Projects.vue 的实现细节，以及路由配置文件的设置。
2025-05-18 15:31:16
1198
4
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ ｜初始化项目
搭建Vue3项目并集成Tailwind CSS v4。技术点包括使用Vue3的组合式API进行状态管理、采用Tailwind CSS提高开发效率、实现响应式设计、使用Vue Router进行路由管理以及模块化组织项目结构。项目结构清晰，分为静态资源、源代码、组件、常量、项目组件、路由配置等目录。项目搭建步骤包括使用Vite创建Vue项目、安装并配置Tailwind CSS，以及编辑全局样式文件。通过这些步骤，开发者可以为后续项目做好技术准备。
2025-05-14 10:54:43
438
原创 Three.js + React 实战系列 - 页脚区域 Footer 组件 ✨
设计和实现个人主页的页脚组件（Footer），强调了其在网站整体设计中的重要性。文章详细讲解了页脚的功能设计，包括显示网站政策、插入社交媒体图标、展示版权声明以及响应式布局的实现。
2025-05-11 20:15:01
786
1
原创 Three.js + React 实战系列 - 联系方式提交表单区域 Contact 组件✨（表单绑定 + 表单验证 + EmailJS）
设计和实现一个响应式、高颜值的联系表单，重点讲解了表单的构建过程、核心代码实现以及响应式与动效体验的优化。通过使用 useState 和 useRef 管理表单状态和 DOM 操作，实现了表单数据的双向绑定和加载状态的模拟。文章还展示了如何通过背景图、动画加载反馈和统一风格的输入框、按钮提升用户体验。
2025-05-11 20:13:53
518
1
原创 Three.js + React 实战系列 - 职业经历区实现解析 Experience 组件✨（互动动作 + 3D 角色 + 点击切换动画）
Experience.jsx组件，该组件通过集成3D动作人物（Developer Model）来展示工作经历。当用户悬停或点击经历时，3D人物会切换动作，增强了页面的互动性和设计感。文章还探讨了项目的主要技术点，包括使用Developer人物组件进行3D动作演示、利用OrbitControls控制鼠标旋转视角、使用useState管理动作名等。
2025-05-11 20:07:26
1143
原创 Tailwind CSS v4 主题化实践入门（自定义 Theme + 主题模式切换）✨
Tailwind v4引入了@theme指令，简化了主题变量的定义，并支持CSS变量，使得主题设计更加灵活。此外，@custom-variant指令允许开发者自定义变体，如暗黑模式或侧边栏模式，而@layer指令则用于管理自定义样式的层级，确保样式优先级。通过这些新特性，开发者可以更高效地实现主题切换和UI设计，提升前端开发体验。
2025-05-10 19:33:53
1423
原创 Three.js + React 实战系列 - 项目展示区开发详解 Projects 组件（3D 模型 + 动效 + 状态切换）✨
熟练使用 state 管理当前展示内容；理解如何配合 GSAP 动画提升 UX；熟悉 Fiber Canvas 与 Drei 工具的用法；数据抽象与复用能力的提升。
2025-05-05 15:59:30
1372
原创 Three.js + React 实战系列 - 客户评价区细解教程 Clients 组件✨（回答式评价 + 评分星级）
在这篇博客中，我们将实现一个简洁的客户评价区域。这个区块在个人主页中可以突显用户体验和专业度，帮助网页创建信任感和个人品牌形象。
2025-05-05 15:49:05
457
原创 Three.js + React 实战系列-3D 个人主页：构建 About 组件 （响应式 + 互动 + 动效）✨
✅ 使用 CSS Grid 实现响应式布局✅ 集成 3D 地球提升科技感✅ 组件化组织图文展示区域✅ 实现邮箱点击复制与反馈动画。
2025-05-01 10:01:19
1117
1
原创 Tailwind CSS 响应式设计解析（含示例）
`Tailwindcss V4` 中如何使用响应式设计功能，包括默认断点、自定义断点、断点范围控制以及容器查询的各种技巧，帮助你在不离开 HTML 的前提下优雅构建响应式页面。
2025-04-29 19:58:56
1184
原创 Three.js + React 实战系列-3D 个人主页：构建 Hero 场景组件（项目核心）✨
在本节中，我们将完成整个 3D 主业项目中最核心的组件 —— `Hero.jsx`。 这个组件作为首页的主视觉部分，整合了 3D 模型、动画相机、交互按钮与自适应布局，构建出一个立体、酷炫、可交互的主场景。
2025-04-26 17:52:36
861
原创 Tailwind CSS 初学者入门指南：项目集成，主要变更内容！
Tailwind CSS 是一个实用优先的 CSS 框架，提供大量原子类（utility classes），使开发者能够快速构建响应式和现代化的用户界面。优点包括：🚀 快速开发🔧 高度可定制🧱 原子化设计😍 社区资源丰富（例如组件库、插件等）
2025-04-24 19:46:13
1081
原创 Three.js + React 实战系列-3D 个人主页 ：完成 Navbar 导航栏组件
在上一节中，我们搭建了项目的基础结构，搭建好了项目框架。本节我们将继续完善页面结构，完成第一个视觉组件 ——Navbar导航栏 ✅
2025-04-20 18:07:09
697
原创 Three.js + React 实战系列 : 从零搭建 3D 个人主页
本篇将正式开启我们的🚀完整项目：教程仓库：这是构建你专属 3D 主页的第一步，让我们开始吧！
2025-04-17 20:17:36
829
原创 使用 react-three-fiber 快速重构 Three.js 场景⚛️
今天，我们将更进一步，将上一篇中`vite + npm`传统 Three.js 原生代码完整 **重构为 react-three-fiber 风格** ✅本文将带你完成以下目标：- ✅ 使用 React 重构原生 Three.js 场景- ✅ 拆分组件化结构，实现同样效果- ✅ 保留交互、动画、响应式特性
2025-04-10 20:19:02
1082
原创 Three.js 入门实战：安装、基础概念与第一个场景⭐
掌握创建 Three.js 场景的基本流程：设置 Scene / Camera / Renderer添加 Mesh / Light / Controls实现响应式和用户交互这也是所有 Three.js 项目的基本框架，掌握它你就迈出第一步啦！
2025-04-09 18:54:29
569
1
原创 初识 Three.js：开启你的 Web 3D 世界 ✨
Three.js 是一个 JavaScript 3D 库，它封装了 WebGL，使开发者可以用更简单的方式在浏览器中创建和展示 3D 内容。🧱 创建 3D 模型和场景🖼️ 加载纹理和材质💡 添加光照、阴影、动画等🎮 控制摄像机视角、交互行为想让网页更酷的前端开发者想快速构建可视化场景的可视化工程师想把 3D 应用到展示中的设计师。
2025-04-07 20:03:32
970
原创 VuePress 代码块插件：让你的文档活起来
对vuepress-plugin-demoblock-plus 进行VuePress 2.x 代码块插件适配（原作者该仓库已经停止维护），让你的文档不再是静态的代码展示，而是可以即时运行和交互的技术平台。
2025-03-17 17:13:39
376
原创 vue组件以及组件之间的通信
在父组件中使用的步骤符号指向的是项目目录中的组件使用(全局)子组件main.jsProps自定义属性极大提高组件的复用性子组件定义一个props父组件引用并传入props的自定义属性props只读，不能被修改如果要修改props的值，直接转存到组件中的属性中去props属性设置默认值defaultdefault 设置默认值type 设置默认的数据类型required 是否必填项 设置的默认值不被认可组件之间的样式冲突默认情况下写在
2022-06-05 17:03:49
446
1
原创 vue生命周期
生命周期一个组件从->->的整个阶段，强调的是是vue的内置函数，随着组件的生命周期，组件生命周期分类是在 created 节点 是在 mounted 节点 数据跟新会触发 beforeUpdate update
2022-06-05 15:23:35
126
原创 ECharts动画使用
动画使用加载动画增量动画动画的配置加载动画<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>散点图</title> <!-- <script src="https://unpkg.com/vue@next"></script> --> <script src="js/lib/echarts.min.j
2022-05-22 12:01:43
863
原创 ECharts高级-显示相关
显示相关主题调色盘主题调色盘全局调色盘局部调色盘颜色渐变线性渐变径向渐变样式直接样式高亮样式自适应主题引入主题的步骤如果引入的是系统内置的主题 light dark直接在init方法第二个参数的位置填入引入其他主题需要先引入对应的js文件，然后init方法第二个参数放置图表代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>主题使用<
2022-05-22 11:07:50
505
原创 ECharts地图
地图常用配置常见效果在地理位置显示数据的差别常用配置缩放拖动名称显示初始比例缩放地图中心点<!DOCTYPE html><html lang=''en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compat
2022-05-18 21:30:10
832
原创 ECharts饼状图
文章目录基本饼状图常见效果代码和图例帮助用户快速了解不同分类数据的占比情况基本饼状图数据由name和value组成的对象形成的数组series中的type设置为pie无须配置xAxis和yAxis常见效果显示文字格式化圆环南丁格尔图选中效果代码和图例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo
2022-05-18 20:20:25
1074
uniapp集成colorUI uView组件库 vuex全局变量管理
2022-05-11
2020电赛-简易温度测量.7z
2021-10-02
uniapp前端H5请求后台API接口二维码数据，返回来的一串很长的二维码字符串
2021-11-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人