Nova UI
关注
分享
扫一扫
文章平均质量分 94
基于Vue实现的UI组件库
拖孩
让一无是处的自己，变得无所不能
展开
-
【Nova UI】十九、打造组件库之折叠组件（下）：深入实现与潜在陷阱
在上篇中，我们对折叠组件的开发做了前期铺垫。现在，将深入其具体实现！不过，开发过程中会有一些 小坑 。本文会详细阐述如何运用Vue特性将折叠组件的设计转化为代码，同时分享可能遇到的潜在问题及解决办法。原创 2025-05-15 08:34:40 · 1543 阅读 · 0 评论 -
【Nova UI】十八、打造组件库之折叠组件（上）：基本介绍、设计思路与实践
在之前的滚动条组件开发系列文章中，我们已经逐步深入地探讨了从基础功能的搭建，到各种交互功能的实现，不过，组件开发的旅程还在继续哦，我们将在本篇文章中开启一个新的篇章 —— 折叠组件的开发啦~原创 2025-05-14 08:49:13 · 1072 阅读 · 0 评论 -
【Nova UI】十七、打造组件库之滚动条组件（下）：拖动滑块与滚动区域交互的实现
在之前的内容中，我们已经深入探讨了滚动条组件开发的多个关键方面啦，包括前期准备工作的完成、核心功能的实现以及滑块大小和滚动距离的计算，我们将在本篇文章中继续深入完善这个组件，探索更高级的交互功能。原创 2025-05-14 08:32:29 · 894 阅读 · 0 评论 -
【Nova UI】十五、打造组件库之滚动条组件（上）：滚动条组件的起步与进阶
现在，前端领域正朝着更加复杂和多元化的方向迅速发展，用户对于交互体验的期望也在持续攀升。当用户浏览网页时，一个流畅顺滑、功能完善的滚动条起着关键作用 。鉴于之前积累的经验，我们决定着手开发滚动条组件。原创 2025-05-13 20:19:56 · 970 阅读 · 0 评论 -
【Nova UI】十六、打造组件库之滚动条组件（中）：探秘滑块的计算逻辑
在上篇中，我们完成了滚动条组件开发的前期准备工作，包括理论推导、布局规划和基础设置。现在，我们将把这些准备转化为实际代码。我们会详细阐述如何实现各项功能，解决开发中的技术挑战，为用户带来更好的滚动体验原创 2025-05-13 20:20:09 · 696 阅读 · 0 评论 -
【Nova UI】十四、打造组件库之按钮组件（下）：按钮组组件的构建之旅
在之前的探索中，成功雕琢出了功能完备且样式精美的Vue按钮组件，它在前端界面上绽放着独特的光彩。然而，前端开发的创新之路永无止境。如今，为了满足更丰富的交互需求，我们将目光聚焦在按钮组组件的实现上。原创 2025-05-12 09:24:39 · 977 阅读 · 0 评论 -
【Nova UI】十三、打造组件库之按钮组件（中）：样式雕琢全攻略
在上一篇文章中，我们已成功搭建起 Vue 按钮组件的基本架构 🏗️，赋予其强大的核心功能与流畅的交互逻辑。此刻，一个功能完备的按钮雏形已然呈现。仅有功能远远不够，样式的精心雕琢同样关键。原创 2025-05-12 09:22:40 · 1086 阅读 · 0 评论 -
【Nova UI】十二、打造组件库之按钮组件（上）：迈向功能构建的关键一步
在上一篇文章中，我们深入探索了 icon 组件从测试到全局注册的全过程🎯，成功为其在项目中稳定运行筑牢了根基。此刻，组件库的建设之旅仍在继续，我们将目光聚焦于另一个关键组件 —— 按钮组件。原创 2025-04-27 19:32:26 · 1274 阅读 · 0 评论 -
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
在上一篇文章中，我们借助自动化的精妙技艺，成功将.svg文件转化为 SVG Vue 组件，为组件库的宏伟蓝图添上浓墨重彩的一笔✨。接下来，让我们深度探索 icon 组件的测试、使用以及全局注册的实现。原创 2025-04-25 09:25:36 · 1118 阅读 · 0 评论 -
【Nova UI】十、打造组件库第一个组件-图标组件（下）：从.svg 到 SVG Vue 组件的高效蜕变✨
在组件库开发中，我们已经成功打造并完善了图标组件体系。然而，随着业务版图的不断扩张，手动逐个编写 SVG Vue 组件的传统方式，逐渐暴露出效率低下的短板，今天，一同踏上探索自动化生成的奇妙之路。原创 2025-04-25 09:23:58 · 1088 阅读 · 0 评论 -
【Nova UI】九、打造组件库第一个组件-图标组件（中）：属性、功能与样式的完美融合
在上一篇文章中，我们成功搭建起 SVG 图标组件包的基础架构。如今，我们将目光聚焦于图标组件样式的雕琢工作，这不仅是提升组件库视觉一致性的关键🔑，更是增强用户体验的重要一环。原创 2025-04-23 10:27:56 · 768 阅读 · 0 评论 -
【Nova UI】八、打造组件库第一个组件-图标组件（上）：图标组件开发实战攻略
在组件库的构建中，那些简洁美观、表意清晰的图标组件🎨，宛如灵动的视觉音符🎶，为用户体验增添了独特魅力。让我们一同开启组件库首个组件 —— 图标组件的开发之旅，一探究竟🔍。原创 2025-04-23 10:26:15 · 870 阅读 · 0 评论 -
【Nova UI】七、SASS 全局变量体系：组件库样式开发的坚固基石
咱们已经实现了 SASS 中一系列实用的函数和混入，这篇文章将带你深入了解怎样利用这些工具实现 SASS 全局变量的巧妙定义、灵活运用，进而让整个组件库的样式焕发出更加协调统一的光彩🌟原创 2025-04-22 11:01:59 · 790 阅读 · 0 评论 -
【Nova UI】六、SASS 赋能组件库：通用方法与混入的变革力量
在搭建组件库时，我们已用 SASS 实现 BEM 规范，为样式管理筑牢根基🏗️。但 SASS 远不止于此，其丰富通用方法和灵活变量机制，将为组件库样式雕琢带来质的飞跃。原创 2025-04-22 11:00:58 · 1140 阅读 · 0 评论 -
【Nova UI】五、解锁 SASS 魔法，优雅实现 BEM 规范
此前，我们领略了JavaScript为BEM规范在交互逻辑实现上的精彩呈现🎯，而在样式设计领域，不同工具各有所长。本文将深入剖析SASS实现BEM规范的方法与技巧，为你的前端开发工具箱增添关键技能。原创 2025-04-02 09:01:15 · 1077 阅读 · 0 评论 -
【Nova UI】四、JavaScript 与 BEM 规范的梦幻联动：前端开发新动能
我们已经领略了 BEM 规范在 CSS 样式管理方面的强大功能，它为我们的样式代码带来了秩序与高效。但在前端开发中，JavaScript 作为交互逻辑的核心语言，与 CSS 紧密协作，该如何实现呢？原创 2025-04-01 08:51:26 · 589 阅读 · 0 评论 -
【Nova UI】三、探秘 BEM：解锁前端 CSS 命名的高效密码
上一篇文章中，我们一步一个脚印，扎实地完成了 Vue 组件库搭建的环境搭建工作。当我们把目光聚焦到组件库的样式设计时， BEM规范，自然而然地进入了我们的视野，让我们一同深入探寻 BEM 规范的奥秘。原创 2025-04-01 08:34:01 · 382 阅读 · 0 评论 -
【Nova UI】二、解锁 Vue 组件库环境搭建秘籍：pnpm、TS 与 Monorepo 的协同
回顾上文，我们已全方位洞悉搭建 Vue 组件库所需的技术选型，也透彻明晰后续搭建步骤的整体规划。此刻，我们即将正式踏入实战的首站 —— 环境搭建，让我们一同深入探索，解锁其中蕴藏的奥秘。原创 2025-03-31 08:40:12 · 428 阅读 · 0 评论 -
【Nova UI】一、探秘 Vue 组件库搭建：从技术选型到持续迭代
此前，我潜心钻研了如何搭建一个组件库✨，然而一直未曾将所学整理并分享出来，实在是有点小遗憾呢。近期恰好得闲，便抓紧时间梳理一番，将其呈现于此，希望能对大家有所帮助哦。原创 2025-03-31 08:26:12 · 1784 阅读 · 0 评论