架構圖
先後端分離總架構圖
前端架構設計圖
MVVM架構模式
MVVM的簡介
MVVM 由 Model,View,ViewModel 三部分構成，Model 層表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯；View 表明UI 組件，它負責將數據模型轉化成UI 展示出來，ViewModel 是一個同步View 和 Model的對象。html
在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。前端
ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。vue
MVVM模式圖
vue
1. 學習vue的前提
- 你只須要了解關於 HTML、CSS 和 JavaScript 的中級知識，就能進行開發。
- vue用於構建用戶界面的漸進式框架，漸進式表明的含義是：主張最少。每一個框架都不可避免會有本身的一些特色，從而會對使用者有必定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
- Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你能夠在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也能夠整個用它全家桶開發，當Angular用；還能夠用它的視圖，搭配你本身設計的整個下層用。你能夠在底層數據邏輯的地方用OO和設計模式的那套理念，也能夠函數式，均可以，它只是個輕量視圖而已，只作了本身該作的事，沒有作不應作的事，僅此而已。
- 咱們不必一上來就搞懂Vue的每個部件和功能，先從核心功能開始學習，逐漸擴展。 同時，在使用中，咱們也沒有必要把所有件能都拿出來，須要什麼用什麼就是了，並且也能夠把Vue很方便的與其它已有項目或框架相結合
2. vue的簡單介紹
Vue.js 能夠說是MVVM 架構的最佳實踐，是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架。專一於 MVVM 中的 ViewModel，不只作到了數據雙向綁定，並且也是一款相對比較輕量級的JS 庫，API 簡潔ios
3. vue熱加載
由於vue的雙向數據綁定特性以及技術的成形，實現了項目的熱加載，改完頁面代碼能當即在瀏覽器方面顯示效果，提升開發效率git
4. vue的雙向數據綁定的原理
Vue.js 是採用 Object.defineProperty 的 getter 和 setter，並結合觀察者模式來實現數據綁定的。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。github
Observer 數據監聽器，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者，內部採用Object.defineProperty的getter和setter來實現。vue-cli
Compile 指令解析器，它的做用對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。npm
Watcher 訂閱者， 做爲鏈接 Observer 和 Compile 的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數。json
Dep 消息訂閱器，內部維護了一個數組，用來收集訂閱者（Watcher），數據變更觸發notify 函數，再調用訂閱者的 update 方法。axios
5. vue引用與後臺的交互
在訪問一個 API 並展現其數據，基於 promise 的 HTTP 客戶端 axios 則是其中很是流行的一種，
首先，咱們要經過 npm/Yarn 或一個 CDN 連接安裝 axios，
咱們有不少種方式能夠從 API 請求信息，可是最好首先確認這些數據看起來長什麼樣，以便進一步肯定如何展現它。爲此，咱們會調用一次這個 API 並輸出結果，以便咱們可以看清楚它。如 CoinDesk 的 API 文檔所述，請求會發送到 https://api.coindesk.com/v1/bpi/currentprice.json。因此，咱們首先建立一個 data 裏的屬性以最終放置信息，而後將會在 mounted 生命週期鉤子中獲取數據並賦值過去：
new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response)) } }) <div id="app"> {{ info }} </div>
咱們獲得的東西是這樣的：
{ "USD": { "code": "USD", "symbol": "$", "rate": "5,255.3433", "description": "United States Dollar", "rate_float": 5255.3433 }, "GBP": { "code": "GBP", "symbol": "£", "rate": "4,061.1927", "description": "British Pound Sterling", "rate_float": 4061.1927 }, "EUR": { "code": "EUR", "symbol": "€", "rate": "4,699.5277", "description": "Euro", "rate_float": 4699.5277 } }
固然這個只是一個很是簡單的示例，在項目開發過程當中，咱們會基於axios作一些封裝，包括錯誤處理，請求攔截，請求優化等等
6. vue經常使用的網站
vue官方文檔：https://cn.vuejs.org/v2/guide/
vue資源精選：http://vue.awesometiny.com/
vue GitHub地址：https://github.com/vuejs/vue
基於vue和element構建的後臺前端解決方案：https://panjiachen.github.io/vue-element-admin-site/zh/
vue項目說明
vue項目網上有很是多的成名模板，我推薦一個，想深刻學習建議多多瀏覽下面的地址
vue和element構建的後臺前端解決方案：<https://panjiachen.github.io/vue-element-admin-site/zh/
目錄結構
├── build # 構建相關
├── static # 靜態資源
│ │── img # 圖片
│ │── favicon.ico # favicon圖標
│ └── index.html # html模板
│ │── Tinymce # 富文本
├── src # 源代碼
│ ├── api # 全部請求
│ ├── assets # 主題 字體等靜態資源
│ ├── components # 全局公用組件
│ ├── directive # 全局指令
│ ├── icons # 項目全部 svg icons
│ ├── lang # 國際化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局樣式
│ ├── utils # 全局公用方法
│ ├── views # views 全部頁面
│ ├── App.vue # 入口頁面
│ ├── main.js # 入口文件 加載組件 初始化等
│ └── permission.js # 權限管理
├── tests # 測試
├── .env.xxx # 環境變量配置
├── .eslintrc.js # eslint 配置項
├── .gitignore # git 配置項
├── .babelrc # babel-loader 配置
├── .travis.yml # 自動化CI配置
├── vue.config.js # vue-cli 配置
└── package.json # package.json
此爲常見的目錄結構，在實際開發過程當中，會由於項目的差別，目錄有些小的改動。
項目啓動
在終端
# 進入項目目錄（假設項目名爲：vue-element-admin） cd vue-element-admin # 安裝依賴 npm install # 本地開發 啓動項目 npm run dev # 啓動完成咱們就能在，提示的地址中，瀏覽或開發項目（例如地址爲：http://127.0.0.1:9528） http://127.0.0.1:9528
url到頁面顯示的過程
瀏覽器端顯示HTML的過程
.vue文件的基本模板
還想了解更多關於vue的相關知識，推薦認真閱讀 vue的官方文檔：https://cn.vuejs.org/v2/guide/