[VueJS] 大型專案開發 #假的

其實我最近在準備科技農夫的事情,只是說剛好遇到需要開發一點東西,所以順手筆記一下。VueJS 這個東西有 Kuro 這扛霸子持續佈道應該是妥當的,個人只是插花一下而已。


何謂大型專案?

首先必須要認知的一件事情,沒有什麼大型專案,或者人人都是大型專案(欸!只是說,我們在開發的時候,總是會希望有一些事情是能保持該有的彈性的,這個彈性不管專案的大小,勢必是留一點空間給自己的一個作法。

投影片在這裡,

http://www.slideshare.net/hinablue/vue-js

公司內訓直播在這裡,

https://www.facebook.com/hinablue/videos/10208267619426295/

少了些什麼?

大抵上我們會使用到的東西有這些,但是這樣真的夠嗎?

JWT

他是很好的工具,不過如果你要將 JWT Token 半永久性的儲存在客戶端,那你得搭配 localStorage 去做,或者是你要使用 Cookie 來存放。當然,不管是哪一種方式,都會有風險在(例如 JWT Token 被有心人士偷走之類的。

不管是被偷走或是被側錄,基本上你後端檢查 Token 正確性的方法還是要有,不然這個 Token 就等於是萬能鑰匙(如果又不小心權限很大的時候。

Vuex + Vue-Router

建議搭配 vuex-router-sync 使用,他可以解決在 Router 初始化的時候,Store 餵進去之後的同步問題。

網路上有人這樣寫,

router.start({  
  store,
  components: { App }
}, '#app')

但是我測試不會過,不知道有沒有人試過?如果是把他丟入 app.vue 裡面的話,就可以正常執行,

export default {  
  store,
  components: {
    myComponent
  }
}

所以這個方式就是在 router.start 之前,加入 sync(store, router) 就可以了(完全不用設定喔(啾咪

VueStrap

可以說是完全抄 AngularStrap 的作法,只是寫法改成 VueJS 的寫法而已。相關的 UI 套件相當多,也可以去 Awesome Vue 裡面尋寶。

例如:

superagent

替代方案也是有,只是個人比較喜歡 superagent 的寫法而已,

SEO

這是個問題,當然網路上有人推 prerender.io 這個服務,不過也或許可以用硬幹的方式解決,

你可以看看他的原始碼,還蠻硬來的(笑

其他

另外,還有許多輔助用的工具,例如彈跳畫面很漂亮的 sweetalert2,他當然也會有 Vue 的版本 vue-sweetalert

或者是,

  • vue-select 如果你是 Select2 的愛用者,可以試試看這個。
  • vue-mixins 各式各樣的 mixin 工具,如果你慣用 jQuery 的話可以看看。
  • v-touch 讓你可以使用 Hammer.js 的功能。
  • vue-touch 同上,貌似是同一個作者 XD
  • vue-viewport 特別列這個出來是因為我覺得他很有趣,他會偵測你的元件是否在 viewport 範圍內(笑
  • vue-socket.io 不解釋!

假的

結論是,我們還是靠 Kuro 大師好惹~

附上 Kuro 投影片一枚,

https://www.slideshare.net/kurotanshi/vuejs-62131923

Hina Chen

偏執與強迫症的患者,算不上是無可救藥,只是我已經遇上我的良醫了。