封裝一個可拖拽的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了......看來，有這樣需求的人還挺多呢。