從零開始的vue.js實戰專案
一、實戰專案的開發涉及方面
1、需求分析
2、腳手架工具
3、資料mock
4、架構設計
5、程式碼編寫
6、自測
7、編譯打包
二、功能技術分析
1、vue-resource 與後端做資料互動
2、vue-router 做前端路由，實現單頁面應用
3、better-scroll 做列表的滾動
4、最大程度元件化
三 、學習目標
1、掌握vue.js在實戰專案中的運用
2、學會使用vue.js完整開發移動端APP
3、學會元件化、模組化的開發方式
四、學習內容
1、vue.js框架的介紹
它是一個輕量級的MVVM框架，體積很小Gzip之後只有20K左右。
資料驅動+元件化的前端開發，社群（GitHUb、論壇、聊天室、Twitter）完善
2、vue-cli 腳手架 搭建基本程式碼框架（node包）----確保node版本 > v4+
它能夠完成目錄結構、本地除錯、程式碼部署、熱載入、單元測試等功能。
3、vue-router 官方外掛管理路由
4、vue-resource 官方外掛用於和後端進行Ajax通訊
5、webpack構建工具
6、es6+eslint eslint是es6程式碼風格檢查工具
7、flex彈性佈局
8、css sticky footer
9、工程化、元件化、模組化
10、移動端常用的開發技巧
五、近些年的前端開發的趨勢
1、舊的瀏覽器被淘汰，移動端需求增加
2、前端互動越來越多，功能越來越複雜
3、架構從傳統後臺MVC向REST API+前端MV*遷移
六、MVVM框架
1、MVVM框架主要包含了View、ViewModel 與 Model。
其中Model主要是資料部分，對應前端的一些JavaScript物件
View是檢視部分，對應前端的DOM
ViewModel是連線檢視和資料的中介軟體。實現一個觀察者的功能。觀測檢視和資料的變化，實現資料的雙向繫結。
2、應用場景
針對具有複雜互動邏輯的前端應用
提供基礎的架構抽象
通過Ajax資料持久化，保證前端使用者體驗。應為重新整理頁面的代價太大了。
六、前端開發技術選型幾要素
1、技術社群的活躍度
2、對比vue.js、react.js、angular.js
(1). vue.js更加地輕量，gzip後只有20K+ , react.js gzip後44K, angular.js gzip後56K
(2). vue.js 更易上手學習曲線比較地平穩，借鑑了angular.js的指令與react.js的元件化，同時具有特性計算屬性
3、vue.js的核心思想
(1)、資料驅動
DOM是資料的一種自然對映。資料響應的原理是viewModel監測資料和檢視的變化自動更新。在vue裡，你只需要改變資料，vue通過directives指令去對dom做一些封裝，當資料發生變化，會通知指令去修改對應的dom，資料驅動dom變化，dom是資料的一種自然對映，vue還會對dom做一些監聽，當我們修改檢視的時候，vue監聽到這些dom的變化，從而改變資料。
(2)、元件化
目的：擴充套件HTML元素，封裝可重用的程式碼。
元件的設計原則：頁面上每個獨立的可視/可互動區域都可以作為一個元件。每個元件對應一個工程目錄，元件所需要的各種資源在這個目錄下就近維護。頁面不過是元件的容器，元件可以巢狀自由組合形成完整的頁面。
六、程式碼風格規範
1、註釋
單行註釋// 後留一個空格。
多行註釋/* 內容 */ 中 ‘內容’兩側各留一個空格。
2、css樣式
(1)、佈局相關的樣式：display、position
(2)、寬高相關的樣式：width、height、line-height
(3)、可被繼承的樣式：字型，顏色等
七、圖示字型的製作
參見：http://blog.csdn.net/aaa333qwe/article/details/77574017
八、資料mock
資料的mock可以採用爬蟲去獲取一些外賣網站的json資料。
九、CSS重置以及.eslintrc.js如何配置
程式碼為cssreset官網（ http://cssreset.com/）提供
eslint官網：https://eslint.org/
十、課程原始碼地址
https://github.com/attraction11/vue-sell-app
十一、參考資料
vue.js 官網：https://cn.vuejs.org/
vue-cli https://github.com/vuejs/vue-cli
vue-resource https://github.com/pagekit/vue-resource
vue-router https://github.com/vuejs/vue-router
better-scroll https://github.com/ustbhuangyi/better-scroll
stylus http://www.zhangxinxu.com/jq/stylus/
es6 http://es6.ruanyifeng.com/
eslint https://eslint.org/