前言：學(xué)習(xí)Vue已經(jīng)兩個(gè)月了笆环，目前前端的框架用得比較多的就是Bootstrap和Vue嫩实，而B(niǎo)ootstrap是開(kāi)發(fā)人員用得較多幔戏，因?yàn)檩^為簡(jiǎn)單啼器，上手也快旬渠。Vue是目前很火的數(shù)據(jù)驅(qū)動(dòng)框，17年的時(shí)候就開(kāi)始火了端壳。

之前我用Bootstrap框架告丢，轉(zhuǎn)學(xué)習(xí)Vue的時(shí)候還是花了一點(diǎn)學(xué)習(xí)成本的。

既然大家會(huì)看這篇文章损谦，那么肯定是vue的學(xué)習(xí)者了岖免，或是遇到的瓶頸，或者剛剛開(kāi)始學(xué)照捡，不知道如何快速起步颅湘，本篇文章將帶領(lǐng)大家在最短的時(shí)間內(nèi)構(gòu)件一個(gè)學(xué)習(xí)Vue的學(xué)習(xí)路線。

一栗精、Vue基礎(chǔ)

1. 對(duì)于沒(méi)有接觸過(guò)es6和webpack的童鞋來(lái)說(shuō)栅炒，不建議直接用官方的腳手架vue-cli構(gòu)件項(xiàng)目。

2. 先按文檔順序最少學(xué)習(xí)完組件那一章。直接在html文件中引入vue.js開(kāi)始學(xué)習(xí),了解vue的基礎(chǔ)指令和語(yǔ)法赢赊。

3. vue的生命周期很重要，了解這點(diǎn)以后可以免去很多問(wèn)題级历。

4. 學(xué)完這些可以做一些練手的小項(xiàng)目释移。

5. 現(xiàn)在可以開(kāi)始學(xué)習(xí)使用vue-cli構(gòu)件項(xiàng)目了，學(xué)習(xí)組件化之前寥殖，推薦先看一下es6關(guān)于模塊的介紹玩讳。阮一峰《ECMAScript6》 Module

6. 光會(huì)這些還是不夠的，還得會(huì)一些npm基礎(chǔ)嚼贡，知道如何用git-bash來(lái)安裝依賴熏纯，會(huì)一些常用的命令。這方面的知識(shí)可以參閱npm入門文檔

7. 看完這些就可以試著將之前的寫(xiě)的demo用搭建的vue-cli來(lái)實(shí)現(xiàn)粤策。

8. 多看看組件那里樟澜，看看如何在vue-cli中怎么實(shí)現(xiàn)組件化，說(shuō)白了叮盘，vue玩的就是組件秩贰。

9. 到這里vue基礎(chǔ)篇就結(jié)束了。你還可以有條件的參閱剩下的官方文檔里面的進(jìn)階篇柔吼，如果時(shí)間有限毒费，就直接進(jìn)入vue-router

二、Vue-router

1. 和之前一樣愈魏，推薦直接用html+js過(guò)一遍文檔

2. 對(duì)路由導(dǎo)航鉤子得好好看一看觅玻。

3. 看完文檔就可以上手vue-cli，一般新手在這幾天都會(huì)死活跑不出來(lái)培漏。

4. 最直接的方法就是去github上搜一些關(guān)于vue-router2.0的demo溪厘，看如何構(gòu)件路由，如何構(gòu)件項(xiàng)目目錄北苟。

５. 如果能跑出來(lái)桩匪，就可以做一些小項(xiàng)目了，比如寫(xiě)一個(gè)知乎日?qǐng)?bào)啊

友鼻，這些demo在github上很多傻昙。

7. 可以結(jié)合一些組件庫(kù)寫(xiě)demo，這樣可以更加了解組件化彩扔。比如餓了么團(tuán)隊(duì)的Element妆档、mint-ui

三、Vuex

什么是vuex虫碉？

Vuex 是一個(gè)專門為 Vue.js 應(yīng)用設(shè)計(jì)的?狀態(tài)管理模型 + 庫(kù)贾惦。它為應(yīng)用內(nèi)的所有組件提供集中式存儲(chǔ)服務(wù)，其中的規(guī)則確保狀態(tài)只能按預(yù)期方式變更。說(shuō)白了就是控制應(yīng)用的一些全局狀態(tài)须板。狀態(tài)改變了碰镜，對(duì)應(yīng)的視圖也會(huì)改變。

1. 在學(xué)習(xí)Vuex時(shí)习瑰，會(huì)有一些ES6特性绪颖，當(dāng)遇到這些時(shí)，最好不要一帶而過(guò)甜奄，去好好看一看這些es6特性柠横。

2. 比如在學(xué)習(xí)Action時(shí)可以看看ES6新增的Promise和參數(shù)解構(gòu)。

3. 實(shí)踐的方法一樣是先看別人別人寫(xiě)的代碼课兄，比如官方的購(gòu)物車實(shí)例的應(yīng)用結(jié)構(gòu)牍氛。

4. 把之前寫(xiě)的demo優(yōu)化一下，有些地方可以用用vuex烟阐。

5. vuex主要是用來(lái)對(duì)不同組件間進(jìn)行通信搬俊，它構(gòu)建了一個(gè)Vue實(shí)例的全局?jǐn)?shù)據(jù)與方法，這些數(shù)據(jù)與方法可以在該Vue實(shí)例的所有組件中g(shù)etter與setter曲饱。

到此悠抹，恭喜你已經(jīng)成功入門Vue了。還學(xué)會(huì)了一點(diǎn)ES6,扩淀，附帶一點(diǎn)Webpack楔敌。

如果你剛接觸Vue，這篇文章可能對(duì)你幫助不大驻谆，接下來(lái)我會(huì)寫(xiě)一些具體使用的文章卵凑。