> ## Content Index
> Fetch the complete content index at: https://blog.hinablue.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# [VueJS] 大型專案開發 #假的
- URL: https://blog.hinablue.me/vuejs-da-xing-zhuan-an-kai-fa-jia-de/
- Published: 2016-07-14T06:23:42.000Z
- Updated: 2026-07-06T18:50:49.000Z
- Author: Hina Chen
- Tags: VueJS, JavaScript

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

---

## 何謂大型專案？

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

投影片在這裡，

> [http://www.slideshare.net/hinablue/vue-js](http://www.slideshare.net/hinablue/vue-js?ref=blog.hinablue.me)

公司內訓直播在這裡，

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

## 少了些什麼？

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

- [Vuex](http://vuex.vuejs.org/en/index.html?ref=blog.hinablue.me)
- [Vue-Router](http://router.vuejs.org/en/index.html?ref=blog.hinablue.me)
- [VueStrap](https://yuche.github.io/vue-strap/?ref=blog.hinablue.me)
- [Superagent](https://github.com/visionmedia/superagent?ref=blog.hinablue.me)
- [JWT + Auth0 with VueJS](https://auth0.com/blog/2015/11/13/build-an-app-with-vuejs/?ref=blog.hinablue.me)

## JWT

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

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

## Vuex + Vue-Router

建議搭配 [vuex-router-sync](https://github.com/vuejs/vuex-router-sync?ref=blog.hinablue.me) 使用，他可以解決在 Router 初始化的時候，Store 餵進去之後的同步問題。

網路上有人這樣寫，

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

```

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

```javascript
export default {
  store,
  components: {
    myComponent
  }
}

```

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

## VueStrap

可以說是完全抄 AngularStrap 的作法，只是寫法改成 VueJS 的寫法而已。相關的 UI 套件相當多，也可以去 [Awesome Vue](https://github.com/vuejs/awesome-vue?ref=blog.hinablue.me) 裡面尋寶。

例如：

- [vue-mdl](https://github.com/posva/vue-mdl?ref=blog.hinablue.me)
- [VueBoot](http://morgul.github.io/vueboot/?ref=blog.hinablue.me)
- [Vux](https://github.com/airyland/vux?ref=blog.hinablue.me)
- [material-ui-vue](http://material-ui-vue.jackyang.me/docs/index.html?ref=blog.hinablue.me)

## superagent

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

- [vue-resource](https://github.com/vuejs/vue-resource?ref=blog.hinablue.me)

## SEO

這是個問題，當然網路上有人推 [prerender.io](https://prerender.io/?ref=blog.hinablue.me) 這個服務，不過也或許可以用硬幹的方式解決，

- [vue-head](https://github.com/ktquez/vue-head?ref=blog.hinablue.me)

你可以看看他的原始碼，還蠻硬來的（笑

## 其他

另外，還有許多輔助用的工具，例如彈跳畫面很漂亮的 [sweetalert2](https://limonte.github.io/sweetalert2/?ref=blog.hinablue.me)，他當然也會有 Vue 的版本 [vue-sweetalert](https://github.com/lishengzxc/vue-sweetalert?ref=blog.hinablue.me)。

或者是，

- [vue-select](http://sagalbot.github.io/vue-select/?ref=blog.hinablue.me) 如果你是 Select2 的愛用者，可以試試看這個。
- [vue-mixins](https://github.com/paulpflug/vue-mixins?ref=blog.hinablue.me) 各式各樣的 mixin 工具，如果你慣用 jQuery 的話可以看看。
- [v-touch](https://github.com/didierfranc/v-touch?ref=blog.hinablue.me) 讓你可以使用 [Hammer.js](https://github.com/hammerjs/hammer.js?ref=blog.hinablue.me) 的功能。
- [vue-touch](https://github.com/vuejs/vue-touch?ref=blog.hinablue.me) 同上，貌似是同一個作者 XD
- [vue-viewport](https://github.com/holic/vue-viewport?ref=blog.hinablue.me) 特別列這個出來是因為我覺得他很有趣，他會偵測你的元件是否在 viewport 範圍內（笑
- [vue-socket.io](https://github.com/MetinSeylan/Vue-Socket.io?ref=blog.hinablue.me) 不解釋！

---

![假的](https://blog.hinablue.me/content/images/2016/07/image.png)

結論是，我們還是靠 Kuro 大師好惹～

附上 Kuro 投影片一枚，

> [https://www.slideshare.net/kurotanshi/vuejs-62131923](https://www.slideshare.net/kurotanshi/vuejs-62131923?ref=blog.hinablue.me)