如果你是一名 Vue 開(kāi)發(fā)新手燕垃，可能已經(jīng)聽(tīng)過(guò)很多行話術(shù)語(yǔ)枢劝，比如單頁(yè)面應(yīng)用程序、異步組件卜壕、服務(wù)器端渲染等等您旁，或者還聽(tīng)說(shuō)過(guò)與 Vue 有關(guān)的一些工具和庫(kù)，比如 Vuex轴捎、Webpack鹤盒、Vue CLI 和 Nuxt蚕脏。
那么究竟什么是Vue，有什么作用昨悼？
公眾號(hào)：代碼集中營(yíng)
每周分享技術(shù)文章蝗锥、優(yōu)質(zhì)軟件資源
Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，主要用于快速的構(gòu)建前端界面率触，與其它大型的前端框架不同终议，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。相比Angular.js來(lái)說(shuō)葱蝗，Vue的核心庫(kù)只關(guān)注視圖層穴张，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合两曼，是初創(chuàng)項(xiàng)目的前端首選框架皂甘。作為一個(gè)新興的前端框架，Vue.js大量借鑒和參考了Angular.js和React.js等優(yōu)秀的前端框架悼凑。而在版本支持上偿枕，Vue.js拋棄了對(duì)IE8的支持，對(duì)移動(dòng)端的支持也有一定的要求户辫，也就是說(shuō)使用Vue.js進(jìn)行移動(dòng)跨平臺(tái)開(kāi)發(fā)時(shí)需要Android 4.2+和iOS 7+支持渐夸。
Vue在MVVM模式中，充當(dāng)?shù)氖荲IewModel渔欢，就是用于處理數(shù)據(jù)交互與相應(yīng)
言歸正傳墓塌，要入門Vue需要掌握哪些吶，這是代碼君繪制的結(jié)構(gòu)圖
根據(jù)架構(gòu)圖奥额，我們可以知道Vue架構(gòu)的搭建需要學(xué)會(huì)哪些知識(shí)苫幢！
首先，在學(xué)習(xí)vue.js的前提是掌握了 html/js/css垫挨，這塊應(yīng)該沒(méi)什么難度韩肝，大家很容易就能掌握。
接下來(lái)需要掌握ES6, 這是大前提一定要懂九榔，一定要懂伞梯，一定要懂， 推薦閱讀阮一峰的 ES6入門帚屉，基礎(chǔ)這里必須掌握，否則也沒(méi)必要往下閱讀漾峡，因?yàn)闆](méi)學(xué)會(huì)走路就想跑攻旦，很容易摔倒！
一生逸、View 和 Components
View 就是UI界面牢屋，實(shí)現(xiàn)基本是html+css且预，當(dāng)然了，目前也有主流的UI組件庫(kù)烙无，我們只需要站在巨人的肩膀進(jìn)行開(kāi)發(fā)锋谐，可以更加高效。
移動(dòng)端UI組件庫(kù)：有贊出品的 Vant
PC端UI組件庫(kù)：餓了么出品的 Element
Components 就是組件截酷，你可以這么理解涮拗，一個(gè)View 可以由多個(gè)Components組件構(gòu)成，比如一個(gè)列表頁(yè)迂苛，可以由頭部組件+列表組件+尾部組件三热，構(gòu)成一個(gè)界面，作為新手三幻，組件化可以先放一下就漾，先學(xué)會(huì)利用成熟的組件庫(kù)，進(jìn)行UI開(kāi)發(fā)即可念搬，新手通過(guò)現(xiàn)成的UI庫(kù)抑堡，會(huì)比較容易快速實(shí)現(xiàn)UI界面
二、Router
Vue Router 是 Vue.js 官方的路由管理器朗徊。它和 Vue.js 的核心深度集成首妖，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的荣倾、基于組件的路由配置
- 路由參數(shù)悯搔、查詢、通配符
- 基于 Vue.js 過(guò)渡系統(tǒng)的視圖過(guò)渡效果
- 細(xì)粒度的導(dǎo)航控制
- 帶有自動(dòng)激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式舌仍，在 IE9 中自動(dòng)降級(jí)
- 自定義的滾動(dòng)條行為
對(duì)于新手來(lái)說(shuō)妒貌，你只需要知道，路由Router 用來(lái)分發(fā)請(qǐng)求對(duì)應(yīng)跳轉(zhuǎn)的界面铸豁，比如用戶訪問(wèn)網(wǎng)址：http://localhost:8088/pageA , http://localhost:8088/pageB,我們需要根據(jù)請(qǐng)求路徑灌曙，通過(guò)路由的方式，配置跳轉(zhuǎn)對(duì)應(yīng)的界面
三节芥、Vuex + Store
什么是vuex在刺？Vuex 是一個(gè)專門為 Vue.js 應(yīng)用設(shè)計(jì)的 狀態(tài)管理模型 + 庫(kù)。它為應(yīng)用內(nèi)的所有組件提供集中式存儲(chǔ)服務(wù)头镊，其中的規(guī)則確保狀態(tài)只能按預(yù)期方式變更蚣驼。狀態(tài)改變了，對(duì)應(yīng)的視圖也會(huì)改變相艇。
上面比較官方颖杏，我舉一個(gè)具體例子，比如我們寫(xiě)界面需要判斷是否登陸坛芽，一般是根據(jù)token留储，這個(gè)token的狀態(tài)管理就是用Vuex+Store,存儲(chǔ)token狀態(tài)翼抠，然后每次調(diào)用接口的時(shí)候，取出token數(shù)據(jù)获讳，如果為空阴颖，自動(dòng)跳轉(zhuǎn)到登陸界面，所以你只需要理解Vuex + Store 用于存儲(chǔ)丐膝，類似輕量級(jí)數(shù)據(jù)庫(kù)
四量愧、接口API + Mock
接口API就是網(wǎng)絡(luò)請(qǐng)求，這里代碼君推薦使用 axios
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端尤误，它本身具有以下特征：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 客戶端支持防止 CSRF/XSRF
這里新手只需要知道網(wǎng)絡(luò)請(qǐng)求框架我們用的是axios侠畔，后續(xù)代碼君會(huì)出專門文章對(duì) axios 使用進(jìn)行講解
Mock專業(yè)術(shù)語(yǔ)就是數(shù)據(jù)模擬，有了mockjs损晤，前端工程師再也不用等后端人員開(kāi)發(fā)好之后再測(cè)數(shù)據(jù)了软棺，因?yàn)閙ockjs可以攔截ajax請(qǐng)求，有了mockjs我們可以模擬后臺(tái)返回?cái)?shù)據(jù)尤勋，以方便的進(jìn)行一系列的操作喘落。這個(gè)新手可以先了解一下概念，后續(xù)在網(wǎng)絡(luò)請(qǐng)求模擬數(shù)據(jù)的時(shí)候會(huì)用到最冰，到時(shí)候也會(huì)專門講解的
五瘦棋、Directives
自定義指令，就是除了VUE定義的指令外暖哨，還支持用戶注冊(cè)自定義指令赌朋，那么你可能會(huì)問(wèn)，什么是vue的指令篇裁，我舉幾個(gè)常用的指令沛慢，后續(xù)你一定會(huì)碰見(jiàn)的
- v-bind指令： 是Vue中，提供的用來(lái)綁定屬性的指令,只能實(shí)現(xiàn)數(shù)據(jù)的單向綁定,從M自動(dòng)綁定到V,無(wú)法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定达布。
- v-model指令：Vue中唯一一個(gè)實(shí)現(xiàn)雙向數(shù)據(jù)綁定的指令, 注意 : 只能運(yùn)用到表單元素中
- v-for指令： 用于寫(xiě)循環(huán)界面团甲，比如列表頁(yè)，復(fù)用同一個(gè)view
- v-if 和 v-else 和 v-else-if 還有 v-show指令：用于控制界面是否顯示黍聂，或者瞞住什么條件進(jìn)行顯示
上面舉的例子是比較常用的躺苦，這個(gè)新手有一個(gè)概念就好，自定義指令還用不到對(duì)于新手产还，但是系統(tǒng)定義的那些常用指令匹厘，我們必須熟悉哈~
六、Mixins
混入 (mixins)： 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式脐区∮希混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)扰路。
這個(gè)概念官方說(shuō)的比較繞，我舉一個(gè)簡(jiǎn)單的例子倔叼，Vue 界面一些公用的東西汗唱，比如頭部、尾部丈攒，不是可以通過(guò)Components實(shí)現(xiàn)組件化開(kāi)發(fā)哩罪，當(dāng)我們?cè)陂_(kāi)發(fā)JS代碼的時(shí)候，如果遇到多個(gè)界面執(zhí)行相同的邏輯代碼巡验，是否也可以抽離出來(lái)吶际插？基于這個(gè)思考，Mixins就出來(lái)了显设，Mixins相當(dāng)于js中的組件化框弛，把相同的抽離出來(lái)，然后再通過(guò)Mixins插入到j(luò)s里面
那么可能有人會(huì)問(wèn)捕捂，抽離出工具類不也可以嘛瑟枫！ Mixins 和抽離出來(lái)的工具類有什么差別吶？
工具類只能針對(duì)方法進(jìn)行抽離指攒，Mixins 可以說(shuō)更加強(qiáng)大慷妙，是可以根據(jù)生命周期進(jìn)行抽離的，比如A允悦、B膝擂、C界面都需要在創(chuàng)建的時(shí)候，驗(yàn)證有沒(méi)有登陸隙弛，就可以在創(chuàng)建的生命周期里面抽離出驗(yàn)證登陸的方法架馋，然后在通過(guò)Mixins插入到各個(gè)界面里
