介紹開發流程以及相關技術

開發全流程

1. 需求分析

2. 腳手架工具

3. 數據mock

4. 架構設計

5. 代碼編寫

   1. 代碼質量:線上生產級別

      1. 代碼開發及測試環節

         1. UI標註

         2. 真實數據演示

      2. 代碼規範

         1. 架構設計

         2. 組件抽象

         3. 模塊拆分

         4. 代碼風格統一

         5. js變量命名規範

         6. css代碼規範

6. 自測

7. 編譯打包

各個相關庫和技術介紹

1. vue-resource作後端數據交互(ajax)官網

2. vue-router作前端路由,實現單頁應用官網

3. 列表滾動-第三方js庫better-scrolll官網

4. 最大程度組件化

5. html5的localstorage作收藏商家功能

6. 圖標字體的使用(Icon font就是將一套圖標集以字體文件的形式封裝，並經過CSS 3的@font-face做爲Web Font調用)

   1. 科普1

   2. 科普2

7. 移動端1像素邊框問題技術處理

8. css sticky footer佈局技術

9. flex彈性佈局技術阮一峯

10. 模塊化,組件化開發技術

    1. 組件化

       1. 擴展html元素,封裝可重用代碼

       2. 頁面拆分紅區塊,區塊對應組件,每一個組件都有一個v-modal

    2. 組件設計原則

       1. 頁面上每一個獨立的可視/可交互區域視爲一個組件

       2. 每一個組件對應一個工程目錄(css,js,模板),組件所須要的各類資源在這個目錄下就近維護(.vue文件)

       3. 頁面不過是組件的容器,組件能夠嵌套自有組合造成完整的頁面

11. vue框架官網

12. 須要es6語言

13. 基於vue-cli腳手架-搭建基本代碼框架

14. 使用webpack構建工具

15. es6+eslint:eslint:es6代碼風格檢查工具(保證團隊代碼風格)

二.介紹vue和MVVM

關於MVVM框架

MVVM模式是經過如下三個核心組件組成，每一個都有它本身獨特的角色：

• Model - 包含了業務和驗證邏輯的數據模型

• View - 定義屏幕中View的結構，佈局和外觀

• ViewModel - 扮演「View」和「Model」之間的使者，幫忙處理 View 的所有業務邏輯

科普1
科普2

關於vue和MVVM

dom的數據經過vue的directives來改變,因此直接改變model的數據就能夠直接將數據反映在dom上面

另一方面,vue有提供dom 監聽來自dom的事件,而後去改變model數據

把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter

每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。