Vue學習路線

前程明亮發表於2018-11-19

前言:學習Vue已經兩個月了,目前前端的框架用得比較多的就是Bootstrap和Vue,而Bootstrap是開發人員用得較多,因為較為簡單,上手也快。Vue是目前很火的資料驅動框,17年的時候就開始火了。

之前我用Bootstrap框架,轉學習Vue的時候還是花了一點學習成本的。

既然大家會看這篇文章,那麼肯定是vue的學習者了,或是遇到的瓶頸,或者剛剛開始學,不知道如何快速起步,本篇文章將帶領大家在最短的時間內構件一個學習Vue的學習路線。

一、Vue基礎

  1. 對於沒有接觸過es6和webpack的童鞋來說,不建議直接用官方的腳手架vue-cli構件專案。

  2. 先按文件順序最少學習完元件那一章。直接在html檔案中引入vue.js開始學習,瞭解vue的基礎指令和語法。

  3. vue的生命週期很重要,瞭解這點以後可以免去很多問題。

  4. 學完這些可以做一些練手的小專案。

  5. 現在可以開始學習使用vue-cli構件專案了,學習元件化之前,推薦先看一下es6關於模組的介紹。阮一峰《ECMAScript6》 Module

  6. 光會這些還是不夠的,還得會一些npm基礎,知道如何用git-bash來安裝依賴,會一些常用的命令。這方面的知識可以參閱npm入門文件

  7. 看完這些就可以試著將之前的寫的demo用搭建的vue-cli來實現。

  8. 多看看元件那裡,看看如何在vue-cli中怎麼實現元件化,說白了,vue玩的就是元件。

  9. 到這裡vue基礎篇就結束了。你還可以有條件的參閱剩下的官方文件裡面的進階篇,如果時間有限,就直接進入vue-router

二、Vue-router

  1. 和之前一樣,推薦直接用html+js過一遍文件

  2. 對路由導航鉤子得好好看一看。

  3. 看完文件就可以上手vue-cli,一般新手在這幾天都會死活跑不出來。

  4. 最直接的方法就是去github上搜一些關於vue-router2.0的demo,看如何構件路由,如何構件專案目錄。

5. 如果能跑出來,就可以做一些小專案了,比如寫一個知乎日報啊

,這些demo在github上很多。

  1. 可以結合一些元件庫寫demo,這樣可以更加了解元件化。比如餓了麼團隊的Element、mint-ui

三、Vuex 什麼是vuex?

Vuex 是一個專門為 Vue.js 應用設計的 狀態管理模型 + 庫。它為應用內的所有元件提供集中式儲存服務,其中的規則確保狀態只能按預期方式變更。說白了就是控制應用的一些全域性狀態。狀態改變了,對應的檢視也會改變。

  1. 在學習Vuex時,會有一些ES6特性,當遇到這些時,最好不要一帶而過,去好好看一看這些es6特性。

  2. 比如在學習Action時可以看看ES6新增的Promise和引數解構。

  3. 實踐的方法一樣是先看別人別人寫的程式碼,比如官方的購物車例項的應用結構。

  4. 把之前寫的demo優化一下,有些地方可以用用vuex。

  5. vuex主要是用來對不同元件間進行通訊,它構建了一個Vue例項的全域性資料與方法,這些資料與方法可以在該Vue例項的所有元件中getter與setter。

到此,恭喜你已經成功入門Vue了。還學會了一點ES6,,附帶一點Webpack。

如果你剛接觸Vue,這篇文章可能對你幫助不大,接下來我會寫一些具體使用的文章。