在這個項目上，也就是前端的工作居多。
某日，一友人因把文件上傳到 Dropbox 而引發衆怒。同時，百度網盤也越來越不好用了。我隨意吐槽之。
於是乎，就有了這個項目。
某個週六深夜，寫小程序已悶死，突然想起答應友人的事情了。
經過初步調查，選用 Electron-vue 作爲基礎框架開發。在我這個剛學 nodejs，更不懂 electron，也就只是有一定的前後端經驗的人，或許這是一個挑戰。
設計定稿
作爲一個設計師，怎麼也要樣子好看，所以就以設計稿起步爲先。
我把主界面畫了出來，確定好 UI 風格了。
VUE
代碼是開始在週日凌晨 1 點多。我選用了 Electron-vue 作爲解決方案。
不過，由於 VUE 不熟悉，也碰到了一些坑。
例如：
- 不知道如何引用文件（感覺以前的前端技能被殘廢了一樣）
- 寫完 CSS 才發現，A 頁面的 CSS 會干擾 B 頁面的 CSS（我還以爲和小程序、React 那樣）
- VUE 的路由我理解了好長時間才明白。
我以前一直寫 jQuery，異步和 DOM 管理沒什麼問題。可是遇到 VUE，我真的覺得腦子的思維要轉變了哦。特別是路由，這個明明不就是後端的事情嗎？怎麼前端模板也有路由概念，我折騰了有 1 小時，才發現原來所謂路由不是跳轉 GET/POST 的意思，而是切換顯示的頁面。怪不得 Google 的時候一直出現的 SPA 這個詞，其實我也沒理解。直到我剛纔專門 Google 才知道了。大哭（其實我以爲 SPA 真的是 SPA 嘛~）。
Electron
這貨坑也不少。
例如：
- 複製粘貼在 Build 後完全用不了。
- 一開始抓頭在思考怎麼做 GET 和 POST……
- 背景模糊玻璃效果，還沒能實現，不過在 demo 的確能做到。
- 打包後，竟然找不到 modules……
七牛
官方的 Node.JS SDK 在 npm run dev 能用，但是打包 App 後有一定問題，這個還是要好好調查。
開發
總而言之，在我 App 編寫 6 個小時候之後，終於基本可以面世了。以 Electron 的方案來開發 App 的確比傳統要舒服和快，而且動畫效果寫起來不喫力（畢竟強大的 CSS3 動畫真厲害），所以我在 App 添加了比較多的動畫效果。
Electron 打包的確很大，也無解。經過 ZIP 壓縮後有 40 多MB，還算能接受。
界面效果
推薦閱讀：
動手實操：如何用七牛雲 API 實現相片地圖？
報名方式：有更多有趣的作品分享給大家？掃描上方二維碼和美女隊長接頭，即可成爲【動手實操】系列玩家。
