felix_alone2012的博客

视频地址：自研低代码拖拽图形编辑器底层库moveable示例学习

在前面咱们的中分享了自己开发的基本拖拽组件，也只是做了最简单的基本实现。真要写产品，更多还是依赖相关的开源优秀库。

vue3组件库开发前面咱卷完了JuanTree组件，接下来一起来卷vue3低代码海报制作平台的基础组件实现。首先是拖拽基础组件的开发，整好把前面学习的知识点再运用进来。

视频教程：vue3自定义指令重构拖拽组件源码

前面我们学习了很多vue3的知识，是时候把它们用起来做一个有意思的平台：低代码海报制作平台了。首先我们要实现基础的拖拽功能，这里非常感谢掘金优秀创作者 - 幽月之格大佬，拜读您的《可拖拽、缩放、旋转组件》技术专栏让我跟着一步步的敲代码，站在大佬的肩膀上，参考下技术大牛是怎么实现的。学习别人的设计思想，当然代码也不是完全照搬

本教程演示了vue3的composition api实现的移动端h5抽屉弹层组件，录屏讲解包含了功能演示和具体的源码实现。

vue3中传统的v-model的定义方式是声明modelValue属性，然后在事件发布时发送update:modelValue来实现v-model更新。笔者在使用jsx模板来开发组件时，发现了其弊端。值得欣喜的是，从vue 3.4开始引入了一个实现v-model的新特性defineModel的composition api。下面是相关实践。

本示例节选自小卷全栈开发实战系列的《Vue3实战》，将演示如何用所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。

感谢小伙伴们对本套自研vue3 tree组件教程的关注，在前一篇《媲美Element Plus JuanTree终极实战：虚拟滚动》的功能演示中发现了小bug，特地整理了相关录屏来说明怎么一步步解决bug的，来回馈小伙伴们的支持。

JuanTree组件功能迭代终于来到了终章——虚拟滚动实现。

前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下，我们讲了两种实现方式来提高渲染性能：前端分页和节点数据懒加载。关于扁平化结构Tree和嵌套结构Tree组件的渲染嵌套结构的Tree组件是一种递归渲染，性能上比起列表结构的v-for渲染比较一般。对于这种渲染方式，在数据量很大的情况下，只有通过懒加载可以提高渲染性能；而扁平化结构则有更多的选择，前端分页是一种方式，还有一种更好的选择，就是本节介绍的虚拟滚动。

前面我们进行了开源组件的自研，很多组件可直接用现成的开源组件库，并不需要自己重复造轮子，为此我们讲如何在当前技术整合的项目中实现组件的按需引入，同时解决遇到的一些坑。

基于自己学习的一点Vue3和ts的知识，写的一个企业级的开源Tree组件，给大伙儿演示下组件功能和API的使用，如果您喜欢，不妨点赞和关注下，后续会继续分享源码教程，感谢支持！

bug原因：插入扁平化列表的位置判断错误~

针对Element Plus Tree组件拖拽功能API用的麻烦，小卷开发了一个API使用简单的JuanTree组件。拖拽功能用起来非常简单！

为自研Tree组件实现节点拖拽功能，实现节点拖拽后的可插入位置识别，下一小节实现节点插入和更新。

为了让企业级Tree开源组件胜任更多的使用场景，我们对JuanTree做了进一步功能迭代和API封装，使得可以轻松实现数据懒加载功能。我们的功能迭代会参照element plus tree的特性，力求API的用法更加简单且多个功能特性一起使用时能很好的工作，故妄称为【Element Tree的Plus版】。

自研Tree组件有两个原因：1. 目前开源UI对Tree组件的用户API不太友好，2. 提升Vue3组件自研能力。目前已实现的功能见上面思维导图。想象Tree组件的一个使用场景：后台管理员通过Tree组件来完成用户角色授权，同时支持对权限进行新增和删除等操作。这里既涉及到Tree节点的勾选操作，又涉及到节点增删。我们的研发就是同时很好的支持多个功能一起使用的情况，不能有bug，即便用户往往只启用一种功能。

前面完成了JuanTree组件的节点编辑和保存功能后，我们把精力放到节点勾选功能实现上来。注意，对于组件的开发者来说，要充分考虑用户的使用场景，组件提供的多个特性同时启用时必须要工作良好。就拿Tree组件来说，用户完全可以在启用勾选的情况下，同时启用节点增删功能，此时增删不能影响到勾选的一致性。

咱们的JuanTree组件功能开发完基本的增删改操作，接下来就是保存操作了。为了方便组件的使用者，我们将内置dirtyData的封装，这样用户对接后台服务提交Tree数据的变更将变得非常简单。这种封装不但简化了组件用户的开发工作，而且提升了产品的用户体验，组件状态不用做任何的刷新，各种操作对用户都是无感知的噢~

在上一节基础上继续迭代JuanTree的功能，我们将实现节点重命名的功能，一起开始学习吧~

《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。

在前面的章节，我们完成了可媲美Element Plus Tree组件的基本开发。通过实现各种计算属性，tree数据状态变化引起的视图更新被计算属性所接管了，无需我们再手动做各种遍历、查找以及手动监听操作，这样后续开发高级功能变得易如反掌啦！！

大家好，我是小卷。得益于JuanTree的扁平化设计，在数据量很大的情况下除了懒加载，使用前端分页也是一种解决渲染性能问题的可选方案。

上一小节我们实现了组件来支持组件开发中用到字体图标的地方，并应用在了tree节点折叠、展开的图标上，本小节我们将其用到tree的插槽内容中，一起来学习基于Vue3 tsx的插槽用法吧~

在前面自定义tree组件继续功能迭代前，我们先开发一个通用的ScgIcon组件，用于后续组件模板中小图标的展示。

本小节在《巧用Vue3 composition api的计算属性实现扁平化tree连线》的基础上实现动画效果。看下目前的实现，展开折叠比较生硬，正好我们用vue提供的过渡动画特性来优化用户体验。

本示例节选自vue3最新开源组件实战教程大纲（持续更新中）的tree组件开发部分。将进一步把基于Vue3 composition api的computed计算属性特性应用到组件开发实战中，继续以最佳实践的方式呈现给大家。

本教程是Vue3 composition api计算属性活学活用（作业题1 - 计算扁平化树树节点的索引）的答案。通过该示例，让读者进一步巩固Vue3 Computed计算属性的最佳实践。

本示例节选自vue3最新开源组件开发思维导图 - tree组件开发部分。在学习了后，给读者朋友留的一道编程作业题。

本示例节选自的tree组件开发部分。考察Vue3 Composition API形式的计算属性的用法，computed可以单独用在ts文件中，实现ts的计算属性类型的定义。

本示例考察响应式对象列表封装和computed计算属性的使用，以及数组reduce方法实现结构化树拍平处理的核心逻辑。

教程整体的大纲如上，第一阶段为开发环境搭建与工具整合，课程以发布，地址为：[vite5整合vue3开发环境实战]思维导图上会将重要的配置细节、开发步骤体现出来。第三阶段：可媲美Element Plus的Tree组件实战。的在线文档环境搭建，视频暂未上线。

最新vite脚手架配置和使用ts-node工具注意事项~

录屏讲解如何为vite脚手架搭建的项目（包括vitepress整合）设置和使用路径别名。

录屏演示怎么解决第三方模块ts声明文件缺失的问题

Vue3单文件jsx输出多组件示例遇到的坑。，小卷在大佬的基础上再完善下实现。来定义和导出多个独立的小组件。可以忽略了，让每个小组件自己返回。的API使用上得到启发，可以在。

为了帮助vue新手更高效的学习vue3的基础知识、组件开发以及项目方案整合，小卷给大家整理了一个10分钟搞定《基于vite的vue脚手架工具整合》的教程。所有工具都是目前最新的版本，实践和调试过，没有一行多余的配置。

jsx的集成参考相关小节。本教程介绍tsx在vue组件开发中的使用技巧，作为大家学习和工作的参考指南。

本篇带vue新手从0搭建最新vue3开发环境，提供工具整合的最佳实践，为后续vue学习以及项目开发效率提速。