最有效、最全的Vue 2.0 學習路線,各個階段適用
「 Vue很難學嗎 」
對於我這種從0.x版本就開始體驗 vuejs 的人來說,當然不算難,那時候沒各種腳手架和複雜搭配,僅僅是一個mvvm的解決方案庫而已,解決了jq帶來的繁瑣操作dom痛點,所以就一直用了。
我最早用的是AngularJs,那時候15年也是剛傳到國內,踩了很多坑這方面的坑,各種文件、API 和解決方案都不完善,所以知道從新學一個新的概念框架的難處和雷點,最近Vue發展的很好,也是華人所寫,所以普及度很高,文件好,語法簡介收穫了一大批忠實深度使用者,我之前 web入坑 系列文章也分析過很多特性。
總有人群裡或者後臺問我 Vue2.0到底如何學(轉行和新手居多),看官網還是一臉懵逼,因為2.0變的很重了,不單單是是一個庫了,而是一個解決方案框架的方向發展,結合nodejs、webpack自動化es6新語法等,這些都是新手很難理解的知識點,所以今天再發個乾貨,希望幫助到有心的讀者和粉絲,也算好事一件。
下面建議學習順序,從 新手起步,到實戰開發,到進階核心都有介紹,結合了自己查的資料和經驗和vue作者尤大的一些建議彙總而成,覺得好請轉發、收藏。
自己是一個五年的前端工程師
這裡推薦一下我的前端學習交流群: 731771211 ,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入。
點選:
1. 紮實的 JavaScript / HTML / CSS 基本功。這是前置條件,這個不多做介紹,這個都不會的,建議迴路一步步重造,參考我第一篇入坑系列,如何學前端。
2. 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具,就只用最簡單的 ,把教程裡的例子模仿一遍,理解用法。不推薦上來就直接用 vue-cli 構建專案,尤其是如果沒有 Node/Webpack 基礎。
3. 照著官網上的示例,自己想一些類似的例子,模仿著實現來練手,加深理解,一定要跟著手動敲,比如寫一個編輯器什麼的啦。
4. 閱讀官方教程進階篇的前半部分,到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應式機制和元件生命週期。『渲染函式(Render Function)』如果理解吃力可以先跳過。
5. 閱讀教程裡關於路由和狀態管理的章節,然後根據需要學習 vue-router 和 vuex。同樣的,先不要管構建工具,以跟著文件裡的例子理解用法為主。
6. 走完基礎文件後,如果你對於基於 Node 的前端工程化不熟悉,就需要補課了。下面這些嚴格來說並不是 Vue 本身的內容,也不涵蓋所有的前端工程化知識,但對於大型的 Vue 工程是前置條件,也是合格的『前端工程師』應當具備的知識。
1. 瞭解 JavaScript 背後的規範,ECMAScript 的歷史和目前的規範制定方式。學習 ES2015/16 的新特性,理解 ES2015 modules,適當關注還未成為標準的提案,ES6以後是各個框架的標配,必須要學,後面北媽也會放出ES6輕鬆學系列。
2. 學習命令列的使用。建議用 Mac,win 也無妨,這個不重要。
3. 學習 Node.js 基礎。建議使用 nvm 這樣的工具來管理機器上的 Node 版本,並且將 npm 的 registry 登錄檔配置為淘寶的映象源。
至少要了解 npm 的常用命令,npm scripts 如何使用,語義化版本號規則,CommonJS 模組規範(瞭解它和 ES2015 Modules 的異同),Node 包的解析規則,以及 Node 的常用 API。應當做到可以自己寫一些基本的命令列程式。注意 Node (6+) 版本開始已經支援絕大部分 ES2015 的特性,可以藉此鞏固 ES2015。
4. 瞭解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用於瀏覽器環境。這個簡單,看著Babel官網文件即可輕鬆配置,希望大家動手起來。
5. 學習 Webpack。Webpack 是一個極其強大同時也複雜的工具,作為起步,理解它的『一切皆模組』的思想,並基本瞭解其常用配置選項和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。
學習 Webpack 的一個挑戰在於其本身文件的混亂,建議多搜尋搜尋,應該還是有質量不錯的第三方教程的。英文好的建議閱讀 Webpack 2.0 的文件,比起 1.0 有極大的改善,但需要注意和 1.0 的不相容之處。
之前也寫過webpack、gulp的基礎介紹,可以翻我部落格。
1. 有了 Node 和 Webpack 的基礎,可以透過 vue-cli 來搭建基於 Webpack ,並且支援單檔案元件的專案了。建議用 webpack-simple 這個模板開始,並閱讀官方教程進階篇剩餘的內容以及 vue-loader 的文件,瞭解一些進階配置。有興趣的可以自己親手從零開始搭一個專案加深理解。
2. 根據 例子 嘗試在 Webpack 模板基礎上整合 vue-router 和 vuex
3. 深入理解 Virtual DOM 和『渲染函式 (Render Functions)』這一章節(可選擇性使用 JSX),理解模板和渲染函式之間的對應關係,瞭解其使用方法和適用場景。
4. (可選)根據需求,瞭解服務端渲染的使用(需要配合 Node 伺服器開發的知識)。介紹一下服務端渲染的概念。
nuxt集合了 vue-router 和 vuex、webpack的搭建套餐,有SEO需要的可以著重瞭解下, 並不是必須要學,這只是一種場景方案,懵不?
在 2.3 釋出後我們釋出了一份完整的構建 Vue 服務端渲染應用的指南。這份指南非常深入,適合已經熟悉 Vue, webpack 和 Node.js 開發的開發者閱讀
從頭搭建一個服務端渲染的應用是相當複雜的。幸運的是,我們有一個優秀的社群專案 Nuxt.js 讓這一切變得非常簡單。Nuxt 是一個基於 Vue 生態的更高層的框架,為開發服務端渲染的 Vue 應用提供了極其便利的開發體驗。更酷的是,你甚至可以用它來做為靜態站生成器。推薦嘗試。
5. 閱讀開源的 Vue 應用、元件、外掛原始碼,自己嘗試編寫開源的 Vue 元件、外掛。
6. vue各種屬性和概念如何結合react 元件混合用,也有必要了解一下,它們有些方案是可以通用的,比如jsx語法、vue用redux等。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2331175/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Java 學習路線之四個階段Java
- 學習java的路線圖-五個必經階段Java
- Java學習路線圖,其五個必經階段Java
- 0基礎大資料學習路線及各階段學習書籍推薦大資料
- Java各階段學習書目Java
- C++各階段學習書目C++
- VUE2.0從零開始 學習路線Vue
- 各個開發階段最流行的Java工具彙總Java
- Vue 近階段學習總結Vue
- 編譯的各個階段編譯
- 人工智慧學習路徑,各階段核心知識點梳理人工智慧
- 學習vue第一階段小結Vue
- 大資料學習路線,一共分為這幾個階段大資料
- Vue學習路線Vue
- 線段樹進階 學習筆記筆記
- Vue學習路線圖Vue
- C語言學習的幾個階段C語言
- 學習程式設計的七個階段程式設計
- 零基礎Python學習路線及階段學習目標【乾貨】Python
- 初學Java的5個階段,你在哪個階段?Java
- 大神的分享:Java程式設計師的學習生涯中各個階段的建議Java程式設計師
- Java學習路線·進階Java
- SAP學習 看看你在哪個階段
- 軟體開發各個階段用到的各種圖
- 適用於初學者的完整雲端計算學習路線指南
- Python學習路線·進階Python
- linux學習的基本分為三個階段Linux
- 跳槽季的查漏補缺,談談對Java程式設計師學習當中各個階段的建議(第四階段)Java程式設計師
- 跳槽季的查漏補缺,談談對Java程式設計師學習當中各個階段的建議(第五階段)Java程式設計師
- 跳槽季的查漏補缺,談談對Java程式設計師學習當中各個階段的建議(第六階段)Java程式設計師
- mybatis各階段的詳解MyBatis
- Python學習的十個階段,學完神功大成,對應一下看看你自己在哪個階段Python
- Linux學習成長路線上需要經歷哪幾個階段?Linux
- 【強烈推薦】可能是最適合你的 Java 學習路線和方法Java
- 10個有效實用最全面推廣方式
- 會計進階學習路線圖
- 適合普通大學生的前端學習路線前端
- Java進階學習之Java架構師的學習路線Java架構