其實我最近在準備科技農夫的事情,只是說剛好遇到需要開發一點東西,所以順手筆記一下。VueJS 這個東西有 Kuro 這扛霸子持續佈道應該是妥當的,個人只是插花一下而已。
何謂大型專案?
首先必須要認知的一件事情,沒有什麼大型專案,或者人人都是大型專案(欸!只是說,我們在開發的時候,總是會希望有一些事情是能保持該有的彈性的,這個彈性不管專案的大小,勢必是留一點空間給自己的一個作法。
投影片在這裡,
公司內訓直播在這裡,
少了些什麼?
大抵上我們會使用到的東西有這些,但是這樣真的夠嗎?
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 投影片一枚,