添加图片注释，不超过 140 字（可选）
这种练习办法便于我转头整理和总结是如何从0实现一个较为完全的Tree组件的。如果大家关注和反馈比较热烈的话，打算出一套视频教程手把手演示如何一步步实现的。 软件
Node 18.18.2NPM 9.8.1VSCode 适宜专业的前端IntelliJ Idea 更适宜以Java为后真个全栈开拓职员，考虑到后续要开拓后台做UI组件的交互，这里选该工具技能栈
这套基本的技能栈个人以为最适宜Vue3组件库的研发，同时组件的编写形式也将由传统的.vue单文件构造，切换到tsx的模板与脚本稠浊的自由模式。后续还会引入VitePress来实现组件示例的文档可视化。 项目构造
添加图片注释，不超过 140 字（可选）
迭代复盘工程整合阶段快速搭建Vite脚手架安装全局工具：npm i -g vite。快速初始化一个整合好ts的vue3工程，利用命令npm init vite，后续用交互式命令实行选项来创建。运行一个小而美的运用：
添加图片注释，不超过 140 字（可选）
回归最简配置忘掉统统招式，统统从头开始，进行最简化配置，在这个根本上一点点叠加。编写一个最大略的.vue单文件的HelloWorld组件并运用一下：
添加图片注释，不超过 140 字（可选）
集成jsx vite和jsx的集成非常大略，只要装一个插件并在vite.config.js中配置下即可。然后把组件的.vue文件改造成.jsx来实现，jsx的模板写法有点像从前Java后端jsp中殽杂java脚本，模板渲染的写法更自由。练习：将前面的组件改写成jsx的实现办法，哀求功能保持不变。 集成ts 在前一节根本上，完成vite和ts的整合。
加ts依赖以及和vue整合的tsc编译器依赖tsconfig干系的配置文件改写js和jsx文件vite的dev启动做事中增加tsc的编译命令 把稳以下问题的修复：添加图片注释，不超过 140 字（可选）
练习：试着将HelloWorld组件中字符串的msg改为一个包含info字符串的IMsg接口类型，并改造前面的示例
集成eslint和prettier涉及的整合步骤列了一个大纲，可以照着去做
添加图片注释，不超过 140 字（可选）
踩坑：vite-plugin-eslint插件配置的ts编译问题
集成tailwindcss方便组件样式的运用，大部分情形不用自己手写样式，复用tailwindcss的样式，提高开拓和工程构建效率：
添加图片注释，不超过 140 字（可选）
练一练：试着为HelloWorld组件中的msg标题运用下tailwindcss样式
添加图片注释，不超过 140 字（可选）
Tree组件根本开拓扁平构造的处理和树渲染本节目标：实现一个扁平构造的列表数据下Tree的页面渲染：
添加图片注释，不超过 140 字（可选）
难点：如何将原始嵌套构造的数据拍平为扁平化的数据
收益：
数组reduce方法在递归处理中的运用。tsx中v-for的写法，把稳key的绑定树节点的展开与折叠交互实现效果：
添加图片注释，不超过 140 字（可选）
开拓要点：
节点类型的定义与扩展扁平化函数改造：原始节点类型转扁平化节点类型扁平化数据列表的动态渲染利用ref和computed实现可见列表的相应式渲染通过onClick交互事宜改变节点的expanded属性来触发视图的更新，把稳是局部更新难点：
可见列表过滤的思路如何确定一个扁平化节点下有多少个后代子元素，有没有更好的办法打算属性在树构造中的妙用 该部分是本套教程的重点章节之一，也是后续Tree组件高等功能实现的根本。不该用打算属性，程序功能实现会变得越来越困难，且实行性能越来越低。 打算节点索引和后代节点长度 Tree很多功能实现须要定位当前索引的位置以及子节点，如果每次都手动遍历全体扁平数据列表，不但low而且性能不高。本节教你怎么在ts中实现相应式的数据打算属性。用了打算属性，它会缓存打算结果，当关注的数据发生变革才会重新打算，实行效率也提高了。 实现效果：
添加图片注释，不超过 140 字（可选）
这里显示了扁平化数据列表每个节点的索引，当节点个数发生改变，位置受影响的节点会重新打算（后续新增删除节点时会演示）。同时在掌握台看到，子节点长度打算属性第一次触发后会缓存结果，数据没变革时不会重新打算。 思路和实现：略 实现参照线 在上一节根本上，连续扩展构造化节点打算属性，实现参照线长度打算属性，以便随着节点的展开折叠动态天生参照线的高度，看效果：
添加图片注释，不超过 140 字（可选）
绿色数字动态展示了父节点参照线的长度。 节点和参照线过渡动画 本节会对之前实现的生硬的折叠和展开效果增加动画润色，会综合利用Vue对付节点渲染所支持的动画特性，包括：
<TransitionGroup>、<Transition>过渡动画标签的利用编写scss文件实现过渡动画样式掌握运用onBeforeEnter、onEnter以及onLeave的动画钩子加dom样式操作，更精准的掌握vue内层元素渲染的动画效果实现难度在于，线的高度是动态打算出来的，且线的元素位于循环渲染的节点元素的内部，须要手动处理vue过渡动画失落效的情形。 实现效果，过渡动画韶光调大，方便看效果：
添加图片注释，不超过 140 字（可选）
svg图标组件的封装与利用算是复习下.vue单文件组件的开拓，整合iconfont的免费素材库js文件，通过自定义组件标签的形式来利用各个svg小图标。
我们用svg小图标更换掉原来<button>标签的+、-符号，看效果：
添加图片注释，不超过 140 字（可选）
Tree高等功能实现自定义节点图标和操作插槽本节先容如何快速实现tsx中的slots，看效果：
添加图片注释，不超过 140 字（可选）
tsx的App组件中利用tree组件时指定插槽的办法：
return () => { const flatTree = generateFlatTree(treeData) return ( <div class='m-4'> <FxTree data={flatTree}> {{ icon: (node: IFlatTreeNode) => ( <span class='mr-1'> {/{!node.isLeaf ? (/} {/ <svg-icon icon='folder-fill' class={'inline-block h-[18px] w-[20px] fill-orange-500'} />/} {/) : (/} {/ <svg-icon icon='folder-fill' class={'inline-block h-[18px] w-[20px] fill-gray-400'} />/} {/)}/} <svg-icon icon='folder-fill' class={`inline-block h-[18px] w-[20px] ${!node.isLeaf ? 'fill-orange-500' : 'fill-gray-400'} `} /> </span> ), operation: () => ( <div> <svg-icon icon='add' class={'inline-block h-[20px] w-[20px] cursor-pointer fill-pink-500'} /> <svg-icon icon='edit' class={'ml-4 inline-block h-[20px] w-[20px] cursor-pointer fill-green-500'} /> <svg-icon icon='delete' class={'ml-4 inline-block h-[20px] w-[20px] cursor-pointer fill-slate-500'} /> </div> ) }} </FxTree> </div> )}扁平化tree的前端分页
在数据量很大的情形下，前端tree的渲染会变慢，可以采取
添加图片注释，不超过 140 字（可选）
Tree的利用办法：
添加图片注释，不超过 140 字（可选）
新增子节点目前只实现了在父节点下新增子节点，新增一级节点实在更大略，后续会完善，包括与后台的数据交互，目前紧张实现前端用户交互功能。
新增效果：
添加图片注释，不超过 140 字（可选）
很显然，由于前面我们用打算属性对节点根本功能做了很好的铺垫，实现新增节点变得非常大略。看到新增节点后，受影响的节点的索引和参照线长度都会重新打算。
组件的利用：
添加图片注释，不超过 140 字（可选）
删除节点移除节点也非常大略，不须要对树进行遍历，利用前面实现的节点索引和长度的打算属性即可，在原始构造和扁平构造中删除并重新绑定后续节点的前置节点即可。效果：
添加图片注释，不超过 140 字（可选）
利用办法，后续须要优化，在用户api重构章节教大家如何优化哈：
添加图片注释，不超过 140 字（可选）
节点重命名
添加图片注释，不超过 140 字（可选）
新增的节点可以立即开启编辑，该功能是组件内置的，利用组件时可这样开启：
添加图片注释，不超过 140 字（可选）
节点勾选节点勾选的功能可以很好和新增删除节点结合，这点超越了element tree，看效果：
添加图片注释，不超过 140 字（可选）
还支持在启用前端分页时的跨页勾选：
添加图片注释，不超过 140 字（可选）
节点数据添加图片注释，不超过 140 字（可选）
节点拖拽该功能目前开拓了一半，由于有了前面根本功能的铺垫，实现拖拽会非常大略，这比element plus tree的实当代码将近少了1/3。详细细节，咱们会在后续系列教程中教大家怎么实现。先看半成品效果：
添加图片注释，不超过 140 字（可选）
咱们实现的效果，比拟element tree，创造拖拽过程中光标也不会闪来闪去，用户体验很棒，剩下还要实现拖放后的节点更新操作。效果会后续更新。。。 总结 关于前端组件自己造轮子的教程，能比较完全的把各部分实现的细节都以逐步迭代的形式连载下来的不是很多。包括一些视频教程，所谓的前端技能专家教你手写vue组件，虎头蛇尾的情形会比较多，这类教程入个门就行，学会怎么搭建环境、整合工具、组件开拓流程，措辞根本的东西自己补补，剩下便是设计实现思路、api特性的灵巧利用。末了这部分是该类教程成功的关键。掘金前端大佬前端杨村落长这方面的教程给我的启示很大，用大佬自己的话来说，教会我的东西，算是“抛砖引玉”。实际我学到的东西，不只是语法、框架特性，更多是设计上的思考，如怎么把树的递归渲染做成大略的列表渲染，怎么用打算属性来代替人工的节点遍历，Vue Composition API对繁芜组件开拓的代码重构带来哪些上风，等等。。。末了，我想说的是，造轮子这件事，不用参考现成UI的源码实现，毕竟开源源码都是浩瀚大佬业余精力奉献出来的，设计思路上会有很多可以优化的部分，紧张还是奔着用户的利用和期待，以实现功能为主。咱更多该当站在产品和API用户的角度，再结合知识储备，让设计和实现能结合Vue新特性，简化开拓任务，提高效率和代码质量。大家加油！
！
