封装一个可拖拽的Tree组件（Vue），并上传到NPM

Github : https://github.com/shuiRong/v...
DEMO: https://vigilant-curran-d6fec...

---

有需求才有动力

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

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

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

无奈，只能自己写了。

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

嘿嘿

---

预览

---

快速开发

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

为什么呢？

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

说些废话，项目无关，可以不看：

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

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

---

上传NPM

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

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

最终，我灵光一闪，想到：为何不直接在main里直接导出Vue组件（.vue文件）呢？

成功！

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

比较意外的是，上传了一天就有112次downloads了......看来，有这样需求的人还挺多呢。