Vue-cli是Vue的腳手架工具
可以進(jìn)行目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測試
1、MVVM框架
View ? ?—— ? ?ViewModel ? ?—— ? ? Model
“DOM”“觀察者vue實(shí)例”? ? “Javascript”
注意：交互為雙向的
特點(diǎn)：
（1）針對(duì)具有復(fù)雜交互邏輯的前端應(yīng)用；
（2）提供基礎(chǔ)的架構(gòu)抽象；
（3）通過Ajax數(shù)據(jù)持久化，保證前端用戶體驗(yàn)。
2、什么是Vue.js
它是一個(gè)輕量級(jí)MVVM框架，
屬于“數(shù)據(jù)驅(qū)動(dòng)+組件化”的前端開發(fā)
Vuejs VS Angular+React
（1）Vue.js耿輕量，gzip后大小只有20k+
（2）Vue.js更易上手，學(xué)習(xí)曲線平穩(wěn)
（3）吸取兩家之長，借鑒了angular的指令（如v-show）和react的組件化
3、vue.js核心思想
（1）數(shù)據(jù)驅(qū)動(dòng)
DOM是數(shù)據(jù)的一種自然映射
? ?擴(kuò)展——數(shù)據(jù)響應(yīng)原理
數(shù)據(jù)（model）改變驅(qū)動(dòng)視圖（view）自動(dòng)更新
（2）組件化
擴(kuò)展HTML元素，封裝可重用的代碼
? ?擴(kuò)展——組件設(shè)計(jì)原則
a、頁面上每個(gè)獨(dú)立的可視/可交互區(qū)域視為一個(gè)組件
b、每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄，組件所需要的各種資源在這個(gè)目錄下就近維護(hù)
c、頁面不過是組件的容器，組件可以嵌套自由組合形成完整的頁面
4、vue-cli腳手架
https://github.com/vue.js/vue-cli
（1）vue-cli安裝（Win10）
步驟1：“Ctrl+ R”打開命令行
node -v
npm install -g vue-cli
步驟2：運(yùn)行vue命令嘗試
vue
vue init
步驟3：創(chuàng)建項(xiàng)目sell
vue init webpack sell
cd sell
npm install
npm run dev
（2）vue-cli項(xiàng)目目錄
（3）webpack打包
5、vue-router前端路由
路由是根據(jù)不同的url地址展示不同的內(nèi)容或界面。
前端路由就是把 不同路由對(duì)應(yīng)不同的內(nèi)容或頁面的任務(wù)交給前端來做，之前是通過服務(wù)端根據(jù)url的不同返回不同的頁面來實(shí)現(xiàn)的，而現(xiàn)在前端路由即實(shí)現(xiàn)了“前后端分離”
5-1：什么時(shí)候使用前端路由？
在單頁面應(yīng)用中，保持大部分頁面結(jié)構(gòu)不變，只改變部分內(nèi)容的使用
5-2：前端路由有什么優(yōu)點(diǎn)和缺點(diǎn)？
優(yōu)點(diǎn)：用戶體驗(yàn)好，不需要每次都從服務(wù)器全部獲取，快速展現(xiàn)給用戶
缺點(diǎn)：
（1）不利于SEO搜索引擎
（2）使用瀏覽器的前進(jìn)，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求，沒有合理的利用緩存
（3）單頁面無法記住之前滾動(dòng)的位置，無法再前進(jìn)、后退的時(shí)候返回之前滾動(dòng)位置
5-3：利用vue-router用來構(gòu)建SPA
5-4：跳轉(zhuǎn)——或者this.$router.push({path:' '})
5-5：
渲染——（5-4跳轉(zhuǎn)至界面 與 5-5渲染至某個(gè)位置 ?二者是配合使用的）
5-6：動(dòng)態(tài)路由匹配map
模式：/user/:username
5-7：嵌套路由
路由嵌套路由
export?default?new?Router({??
??routes:?[??
????{??
????????path:'/goods',??
????????name:'Goodslist',??
????????component:?Goodslist,??
????????children?:[??
? ? ? ? ? ? ? ? {??
????????????????path:'title',??
????????????????name:'title',??
????????????????component:?Title??
???????????????},??
???????????????{??
? ? ? ? ? ? ? ????path:'img',??
? ? ? ? ? ? ????? name:'img',??
??????????????????component:?Image??
????????????????}??
????????]??
?????}??
??]??
})??
5-8：編程式路由
什么是編程式路由？——通過js來實(shí)現(xiàn)頁面的跳轉(zhuǎn)
方式1：$router.push("name")
方式2：$router.push({path:"name"})
方式3：$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123})
方式4：$router.go(1)
5-9：命名路由和命名視圖
（1）命名路由——給路由定義不同的名字，根據(jù)名字進(jìn)行匹配
（2）命名視圖——給不同的router-view定義名字，通過名字進(jìn)行相應(yīng)組件的渲染
6、vue-resource
在node環(huán)境下安裝輸入命令行：npm install vue-resource --save
其請(qǐng)求API是按照REST風(fēng)格設(shè)計(jì)的，它提供了7種請(qǐng)求API:
（1）get：從服務(wù)器端獲取數(shù)據(jù)——“得到”
（2）post：從客戶端向服務(wù)器端提交數(shù)據(jù)——“提交”
（3）head
（4）delete
（5）jsonp
（6）put
（7）patch
全局?jǐn)r截器interceptors
Vue.http.interceptors.push((request,next)=>{??
//..??
//請(qǐng)求發(fā)送的處理邏輯??
//..??
??next(response)?=>?{??
//..??
//請(qǐng)求發(fā)送后的處理邏輯??
//..??
//根據(jù)請(qǐng)求的狀態(tài)，response參數(shù)會(huì)返回給successCallback或errorCallback??
return?response??
??})??
})?
