架構圖
前后端分離總架構圖
前端架構設計圖
MVVM架構模式
MVVM的簡介
MVVM 由 Model,View,ViewModel 三部分構成，Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象。
在MVVM架構下，View 和 Model 之間並沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。
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 簡潔
3. vue熱加載
因為vue的雙向數據綁定特性以及技術的成形，實現了項目的熱加載，改完頁面代碼能立即在瀏覽器方面顯示效果，提高開發效率
4. vue的雙向數據綁定的原理
Vue.js 是采用 Object.defineProperty 的 getter 和 setter，並結合觀察者模式來實現數據綁定的。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
Observer 數據監聽器，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者，內部采用Object.defineProperty的getter和setter來實現。
Compile 指令解析器，它的作用對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。
Watcher 訂閱者， 作為連接 Observer 和 Compile 的橋梁，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的相應回調函數。
Dep 消息訂閱器，內部維護了一個數組，用來收集訂閱者（Watcher），數據變動觸發notify 函數，再調用訂閱者的 update 方法。
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/