- 博客(160)
- 资源 (3)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Progress Steps （步骤条）
组件通过 Vue 的 Composition API 和 ref 进行响应式状态管理，使用 v-for 渲染步骤列表，并利用 Tailwind CSS 的实用工具类实现动态样式和过渡效果。组件提供了“上一页”和“下一页”按钮，用户可以控制步骤的前进和后退，进度条的长度和步骤样式会动态更新。文
2025-05-19 22:02:26
476
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Expanding Cards （展开式卡片）
Expanding Cards组件通过Vue3的响应式状态ref和v-for指令动态渲染一组横向排列的背景卡片，点击某张卡片时，该卡片会展开至主要区域，其他卡片则收缩。
2025-05-18 15:46:50
1143
原创 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | 页面布局 与 Vue Router 路由配置
项目包含四个主要模块：导航栏（Nav）、首页（Home）、项目展示（Projects）和关于页面（About）。通过创建组件结构，项目实现了基础导航与页面路由体系。代码示例展示了 Nav.vue、Home.vue 和 Projects.vue 的实现细节，以及路由配置文件的设置。
2025-05-18 15:31:16
974
原创 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
411
原创 Three.js + React 实战系列 - 页脚区域 Footer 组件 ✨
设计和实现个人主页的页脚组件（Footer），强调了其在网站整体设计中的重要性。文章详细讲解了页脚的功能设计，包括显示网站政策、插入社交媒体图标、展示版权声明以及响应式布局的实现。
2025-05-11 20:15:01
751
1
原创 Three.js + React 实战系列 - 联系方式提交表单区域 Contact 组件✨（表单绑定 + 表单验证 + EmailJS）
设计和实现一个响应式、高颜值的联系表单，重点讲解了表单的构建过程、核心代码实现以及响应式与动效体验的优化。通过使用 useState 和 useRef 管理表单状态和 DOM 操作，实现了表单数据的双向绑定和加载状态的模拟。文章还展示了如何通过背景图、动画加载反馈和统一风格的输入框、按钮提升用户体验。
2025-05-11 20:13:53
503
1
原创 Three.js + React 实战系列 - 职业经历区实现解析 Experience 组件✨（互动动作 + 3D 角色 + 点击切换动画）
Experience.jsx组件，该组件通过集成3D动作人物（Developer Model）来展示工作经历。当用户悬停或点击经历时，3D人物会切换动作，增强了页面的互动性和设计感。文章还探讨了项目的主要技术点，包括使用Developer人物组件进行3D动作演示、利用OrbitControls控制鼠标旋转视角、使用useState管理动作名等。
2025-05-11 20:07:26
1128
原创 Tailwind CSS v4 主题化实践入门（自定义 Theme + 主题模式切换）✨
Tailwind v4引入了@theme指令，简化了主题变量的定义，并支持CSS变量，使得主题设计更加灵活。此外，@custom-variant指令允许开发者自定义变体，如暗黑模式或侧边栏模式，而@layer指令则用于管理自定义样式的层级，确保样式优先级。通过这些新特性，开发者可以更高效地实现主题切换和UI设计，提升前端开发体验。
2025-05-10 19:33:53
1314
原创 Three.js + React 实战系列 - 项目展示区开发详解 Projects 组件（3D 模型 + 动效 + 状态切换）✨
熟练使用 state 管理当前展示内容；理解如何配合 GSAP 动画提升 UX；熟悉 Fiber Canvas 与 Drei 工具的用法；数据抽象与复用能力的提升。
2025-05-05 15:59:30
1356
原创 Three.js + React 实战系列 - 客户评价区细解教程 Clients 组件✨（回答式评价 + 评分星级）
在这篇博客中，我们将实现一个简洁的客户评价区域。这个区块在个人主页中可以突显用户体验和专业度，帮助网页创建信任感和个人品牌形象。
2025-05-05 15:49:05
444
原创 Three.js + React 实战系列-3D 个人主页：构建 About 组件 （响应式 + 互动 + 动效）✨
✅ 使用 CSS Grid 实现响应式布局✅ 集成 3D 地球提升科技感✅ 组件化组织图文展示区域✅ 实现邮箱点击复制与反馈动画。
2025-05-01 10:01:19
1093
1
原创 Tailwind CSS 响应式设计解析（含示例）
`Tailwindcss V4` 中如何使用响应式设计功能，包括默认断点、自定义断点、断点范围控制以及容器查询的各种技巧，帮助你在不离开 HTML 的前提下优雅构建响应式页面。
2025-04-29 19:58:56
1128
原创 Three.js + React 实战系列-3D 个人主页：构建 Hero 场景组件（项目核心）✨
在本节中，我们将完成整个 3D 主业项目中最核心的组件 —— `Hero.jsx`。 这个组件作为首页的主视觉部分，整合了 3D 模型、动画相机、交互按钮与自适应布局，构建出一个立体、酷炫、可交互的主场景。
2025-04-26 17:52:36
840
原创 Tailwind CSS 初学者入门指南：项目集成，主要变更内容！
Tailwind CSS 是一个实用优先的 CSS 框架，提供大量原子类（utility classes），使开发者能够快速构建响应式和现代化的用户界面。优点包括：🚀 快速开发🔧 高度可定制🧱 原子化设计😍 社区资源丰富（例如组件库、插件等）
2025-04-24 19:46:13
1041
原创 Three.js + React 实战系列-3D 个人主页 ：完成 Navbar 导航栏组件
在上一节中，我们搭建了项目的基础结构，搭建好了项目框架。本节我们将继续完善页面结构，完成第一个视觉组件 ——Navbar导航栏 ✅
2025-04-20 18:07:09
681
原创 Three.js + React 实战系列 : 从零搭建 3D 个人主页
本篇将正式开启我们的🚀完整项目：教程仓库：这是构建你专属 3D 主页的第一步，让我们开始吧！
2025-04-17 20:17:36
813
原创 使用 react-three-fiber 快速重构 Three.js 场景⚛️
今天，我们将更进一步，将上一篇中`vite + npm`传统 Three.js 原生代码完整 **重构为 react-three-fiber 风格** ✅本文将带你完成以下目标：- ✅ 使用 React 重构原生 Three.js 场景- ✅ 拆分组件化结构，实现同样效果- ✅ 保留交互、动画、响应式特性
2025-04-10 20:19:02
1033
原创 Three.js 入门实战：安装、基础概念与第一个场景⭐
掌握创建 Three.js 场景的基本流程：设置 Scene / Camera / Renderer添加 Mesh / Light / Controls实现响应式和用户交互这也是所有 Three.js 项目的基本框架，掌握它你就迈出第一步啦！
2025-04-09 18:54:29
555
1
原创 初识 Three.js：开启你的 Web 3D 世界 ✨
Three.js 是一个 JavaScript 3D 库，它封装了 WebGL，使开发者可以用更简单的方式在浏览器中创建和展示 3D 内容。🧱 创建 3D 模型和场景🖼️ 加载纹理和材质💡 添加光照、阴影、动画等🎮 控制摄像机视角、交互行为想让网页更酷的前端开发者想快速构建可视化场景的可视化工程师想把 3D 应用到展示中的设计师。
2025-04-07 20:03:32
919
原创 VuePress 代码块插件：让你的文档活起来
对vuepress-plugin-demoblock-plus 进行VuePress 2.x 代码块插件适配（原作者该仓库已经停止维护），让你的文档不再是静态的代码展示，而是可以即时运行和交互的技术平台。
2025-03-17 17:13:39
362
原创 vue组件以及组件之间的通信
在父组件中使用的步骤符号指向的是项目目录中的组件使用(全局)子组件main.jsProps自定义属性极大提高组件的复用性子组件定义一个props父组件引用并传入props的自定义属性props只读，不能被修改如果要修改props的值，直接转存到组件中的属性中去props属性设置默认值defaultdefault 设置默认值type 设置默认的数据类型required 是否必填项 设置的默认值不被认可组件之间的样式冲突默认情况下写在
2022-06-05 17:03:49
420
1
原创 vue生命周期
生命周期一个组件从->->的整个阶段，强调的是是vue的内置函数，随着组件的生命周期，组件生命周期分类是在 created 节点 是在 mounted 节点 数据跟新会触发 beforeUpdate update
2022-06-05 15:23:35
118
原创 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
856
原创 ECharts高级-显示相关
显示相关主题调色盘主题调色盘全局调色盘局部调色盘颜色渐变线性渐变径向渐变样式直接样式高亮样式自适应主题引入主题的步骤如果引入的是系统内置的主题 light dark直接在init方法第二个参数的位置填入引入其他主题需要先引入对应的js文件，然后init方法第二个参数放置图表代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>主题使用<
2022-05-22 11:07:50
498
原创 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
826
原创 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
1063
原创 ECharts通用配置 柱状图 折线图 散点图
文章目录ECharts介绍快速入门ECharts介绍Echarts是一个使用Javascript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观丰富，交互丰富，可高度个性化定制的数据可视化图表快速入门引入echarts.min.js文件创建dom元素基于dom元素进行实例化echarts使用dom和echats配置显示图标<!DOCTYPE html><html><head> <meta charset="
2022-05-16 20:11:48
914
原创 一文带你了解maven基础和高级（不含私服）
文章目录maven在项目中解决的问题maven是什么maven在项目中解决的问题jar包不统一，不兼容工程升级维护过程中操作繁琐maven是什么本质是一种项目管理工具，将开发者和管理过程抽象成一个对象模型（POM）POM ：项目对象模型......
2022-05-16 15:25:05
308
原创 uniapp集成colorUI uView2.0 Vuex
文章目录说明新建uniapp项目集成colorUI集成uView（uniapp插件市场引入）集成Vuex另uView集中管理API 请求和响应拦截器也非常优秀说明由于经常要用到uniapp开发app所以每次都要重复搭建需要的模板，但是自己常用的框架就uView和colorUI。在我看来colorUi的css和布局写的不错，而uView又可以提供丰富的组件库。资源下载地址新建uniapp项目集成colorUI下载ColorUI-Uniapp 下载地址复制ColorUI-Uniapp
2022-05-11 09:39:49
1553
2
原创 SSM 重点梳理
文章目录Spring重点配置bean标签Spring相应APISpring配置连接池Spring重点配置bean标签id标签 ：在容器中Bean实例的唯一标识 不允许重复class属性 ：要实例化的Bean的全限定名scope属性 ：Bean的作用范围，常用的时Singleten(默认)和prototype<property>标签 ：属性注入name属性 ：属性名称value属性 ：注入的普通属性值ref属性 ：注入的对象引用值<list>标签<map
2022-05-04 10:11:23
684
原创 再品Spring Ioc 和 Aop
文章目录Spring好处IOC基于XML和基于注解开发基于XML开发基于注解开发配置类扫包+注解Spring好处Spring框架已经成为Java开发行业的标准Spring全家桶 已经对开发的各个层面都有解决方案Web ： Spring MVC持久层 ： Spring Data/Spring Data JPA(关系型数据库)、Spring Data Redis 、Spring Data MongoDB（非关系型数据库）安全校验：Spring Security构建工程脚手架 ： Spring
2022-03-29 09:29:02
185
原创 javaScript知识点
文章目录输入输出变量声明命名规范数据类型简单数据类型输入输出prompt("请输入您想输入的内容")alert("弹出对话框")console.log("控制台输出打印")变量声明只声明不赋值是undefined不声明不赋值直接报错直接赋值可以使用(但是会变成全局变量)var agevar age = 18var age = prompt("输入您的年龄")var age=18, address = "火影春", gz = 2000案例： 交换两个变量的值//交
2022-03-28 15:32:31
2589
原创 SSM框架整合
文章目录概述整合过程准备工作实体类 接口以及实现 前端页面依赖文件配置（pom.xml）MyBatis映射文件和核心文件配置（AccountMapper.xml sqlMapConfig-spring.xml）spring的配置文件(applicationContext.xml spring-mvc.xml)web.xml文件配置(web.xml)概述MyBatis负责Dao层（持久层功能）Spring是粘合剂负责三层的BeanSpringMVC负责的Web层，封装数据传递数据到Service
2022-03-02 15:47:09
222
uniapp集成colorUI uView组件库 vuex全局变量管理
2022-05-11
2020电赛-简易温度测量.7z
2021-10-02
uniapp前端H5请求后台API接口二维码数据，返回来的一串很长的二维码字符串
2021-11-25
TA创建的收藏夹 TA关注的收藏夹
TA关注的人