星期五, 10月 07, 2016

[Vue.js] 建構大型應用程式



基本上的Vue.js是一個library
如果要做大型專案要配合其他技術才會更完整,
這一篇記錄一下相關的技術資源。
學習前端之路整個變化太快了lol

主要的架構


採用Vue.js 2.0 (組件式寫法,要搭配webpack與es6 js的寫法) + Lavavel 5.2

ES6

由於比較想採用組件式(*.vue)寫法,所以要使用ES6的javascript寫作方式。
另外開一篇筆記記錄=> ES6 在Vue.js的筆記


Webpack 模組管理工具




Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。
它的核心功能如下:
  • 可同時整合 CommonJSAMD 模組
  • 轉換 JSX, Coffee Script, TypeScript 等
  • 分散封裝專案使用的程式碼,使載入頁面時只需載入當頁所需的程式碼以加速載入速度
  • 整合樣式表 (css, sass, less 等)
  • 處理圖片與字型
  • 建置 production-ready 的程式碼 (壓縮)


如果在Lavavel裡面整合的話,請參考Lavarel Elixir (大大簡化使用gulp的流程)



Vuex 狀態管理

https://github.com/vuejs/vuex


npm install vuex --save

簡中文件
https://vuefe.cn/vuex/intro.html

Vue-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語法工具


參考

http://www.slideshare.net/hinablue/vue-js?next_slideshow=1

沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails