基本上的Vue.js是一個library，
如果要做大型專案要配合其他技術才會更完整，
這一篇記錄一下相關的技術資源。
學習前端之路整個變化太快了lol
主要的架構
採用Vue.js 2.0 (組件式寫法，要搭配webpack與es6 js的寫法) + Lavavel 5.2
ES6
由於比較想採用組件式(*.vue)寫法，所以要使用ES6的javascript寫作方式。
另外開一篇筆記記錄=> ES6 在Vue.js的筆記
另外開一篇筆記記錄=> ES6 在Vue.js的筆記
Webpack 模組管理工具
Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。
它的核心功能如下:
用來處理ajax reqeust的跨瀏覽器套件
如果全前端SPA的應用程式的話，就不會使用後端的路由了:D
文件http://router.vuejs.org/
https://github.com/vuejs/vuex-router-sync
http://www.slideshare.net/hinablue/vue-js?next_slideshow=1
- 可同時整合 CommonJS 和 AMD 模組
- 轉換 JSX, Coffee Script, TypeScript 等
- 分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
- 整合樣式表 (css, sass, less 等)
- 處理圖片與字型
- 建置 production-ready 的程式碼 (壓縮)
如果在Lavavel裡面整合的話，請參考Lavarel Elixir (大大簡化使用gulp的流程)
Vuex 狀態管理
https://github.com/vuejs/vuexVue-Resource 處理ajax request套件
https://github.com/vuejs/vue-resource用來處理ajax reqeust的跨瀏覽器套件
Vue-loader
幫助我們把Example.vue的組件檔案轉換成Javascript模組 (模塊)
如下圖
特點
- 支援ES2015
- 可以在組件內支援其他webpack的模組，可以寫jade語法或SASS ....
- 可以模擬組件內CSS的作用域
- 開發階段有熱加載
V-Router 前端路由器
https://github.com/vuejs/vue-router如果全前端SPA的應用程式的話，就不會使用後端的路由了:D
文件http://router.vuejs.org/
Vuex-router Sync
輕鬆地保持vue-router和vuex存儲同步。https://github.com/vuejs/vuex-router-sync
開發工具
*.vue檔案的sublime語法工具
沒有留言:
張貼留言
留個話吧:)