封装一个可拖拽的Tree组件(Vue),并发布到NPM
发布于 9 天前 作者 shuiRong 280 次浏览 来自 分享

Github : https://github.com/shuiRong/vue-drag-tree DEMO: https://shuirong.github.io/vuedragtree/#/


有需求才有动力

一开始在新项目里用的Tree组件是Element的,但踩到坑了:Tree节点的填加/删除无法反映到data里,这个影响就比较大了。然后我通过一些奇技淫巧让节点的改变反映到了data里,虽然有点消耗性能(用了深克隆),但勉强算是解决了问题。

然后随着项目的进展,需要Tree节点可拖拽…

本着能用开源项目就不自己写的原则,我就去Gayhub上找适合的项目了。但很不幸运,虽然找到了很多不错的拖拽项目,但都不是我想要的。

无奈,只能自己写了。

快速了学习了HTML5的拖拽特性后,发现尤雨溪写了一个树形视图,正好能借鉴下。两者一结合,项目就成了。

嘿嘿


预览

vue-drag-tree.gif


快速开发

如果你决定了要做一件事,那就尽可能地快点。比如做一个项目,注释,文档什么乱七八糟的都可以后来再加上,尽早写出来个Version 1.0 和一个能看的DEMO再说

为什么呢?

因为夜长梦多,时间久了什么事都可能发生。尽管对于Tree组件这种项目来说,时机并没有那么重要(比较重要的:项目质量,需求的满足度),但你也应该有这样的意识

说些废话,项目无关,可以不看:

该做选择的时侯就要果断,“犹犹豫豫,顾忌很多”会让你大概率错失良机。或许你会说,难道不该考虑“×××”“×××”“×××”的情况吗?应该考虑,做选择时就应该考虑到所有相关可能出现的情况。
但是,你考虑的太久了!
个人觉得考虑问题不应该带入情绪,它只会把你的注意力带到次要矛盾那里,而不是主要的。完全这样思考问题,我还做不到,但在努力做的更好。

"当断不断,反受其乱",最新看<<中国历朝通俗演义>>,感悟到的。

上传NPM

关于"Vue组件如何上传到NPM,供他人使用“,我一开始受到了一些相关博客的误导,大概就是webpack把项目打包成JS文件,然后在package.jsonmain导出该JS文件。

我参考了很多文章和项目的代码,仍旧不能成功地在其他项目中引入。

最终,我灵光一闪,想到:为何不直接在main里直接导出Vue组件(.vue文件)呢?

成功!

// 在项目根目录下登录npm。首先,你需要有个npm帐号
npm login
// ...根据提示输入用户名,密码
// ...上传。以后每次代码更新后都可以用这条命令重新上传。记得上传前更新下版本号。
npm publish 

比较意外的是,上传了一天就有112次downloads了…看来,有这样需求的人还挺多呢。 (补充:刚刚得知这些下载量基本都来自于镜像 -_- ) npm.png

1 回复

**当断不断,反受其乱 ** 确实

回到顶部