新手入門指導:Vue 2.0 的建議學習順序

来源:http://www.cnblogs.com/lhb25/archive/2016/10/26/vue-turtoials-for-new-starter.html
-Advertisement-
Play Games

通讀官方教程 (guide) 的基礎篇。不要用任何構建工具,就只用最簡單的腳本引入,把教程里的例子模仿一遍,理解用法。不推薦上來就直接用 vue-cli 構建項目,尤其是如果沒有 Node/Webpack 基礎。有了 Node 和 Webpack 的基礎,可以通過 vue-cli 來搭建基於 Web... ...


起步

1. 扎實的 JavaScript / HTML / CSS 基本功。這是前置條件。

2. 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具,就只用最簡單的 <script>,把教程里的例子模仿一遍,理解用法。不推薦上來就直接用 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,適當關註還未成為標準的提案

2. 學習命令行的使用。建議用 Mac。

3. 學習 Node.js 基礎。建議使用 nvm 這樣的工具來管理機器上的 Node 版本,並且將 npm 的 registry 註冊表配置為淘寶的鏡像源至少要瞭解 npm 的常用命令,npm scripts 如何使用,語義化版本號規則,CommonJS 模塊規範(瞭解它和 ES2015 Modules 的異同),Node 包的解析規則,以及 Node 的常用 API。應當做到可以自己寫一些基本的命令行程式。註意最新版本的 Node (6+) 已經支持絕大部分 ES2015 的特性,可以藉此鞏固 ES2015。

4. 瞭解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用於瀏覽器環境。

5. 學習 Webpack。Webpack 是一個極其強大同時也複雜的工具,作為起步,理解它的『一切皆模塊』的思想,並基本瞭解其常用配置選項和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。學習 Webpack 的一個挑戰在於其本身文檔的混亂,建議多搜索搜索,應該還是有質量不錯的第三方教程的。英文好的建議閱讀 Webpack 2.0 的文檔,比起 1.0 有極大的改善,但需要註意和 1.0 的不相容之處

Vue 進階

1. 有了 Node 和 Webpack 的基礎,可以通過 vue-cli 來搭建基於 Webpack ,並且支持單文件組件的項目了。建議用 webpack-simple 這個模板開始,並閱讀官方教程進階篇剩餘的內容以及 vue-loader 的文檔,瞭解一些進階配置。有興趣的可以自己親手從零開始搭一個項目加深理解。

2. 根據 例子 嘗試在 Webpack 模板基礎上整合 vue-router 和 vuex
3. 深入理解 Virtual DOM 和『渲染函數 (Render Functions)』這一章節(可選擇性使用 JSX),理解模板和渲染函數之間的對應關係,瞭解其使用方法和適用場景。

4. (可選)根據需求,瞭解服務端渲染的使用(需要配合 Node 伺服器開發的知識)。其實更重要的是理解它所解決的問題並搞清楚你是否需要它。
5. 閱讀開源的 Vue 應用、組件、插件源碼,自己嘗試編寫開源的 Vue 組件、插件。

6. 參考 貢獻指南 閱讀 Vue 的源碼,理解內部實現細節。(需要瞭解 Flow

7. 參與 Vue GitHub issue 的定位 -> 貢獻 PR -> 加入核心團隊 -> 升任 CTO -> 迎娶白富美...(誤

 

您可能感興趣的相關文章

 

原文鏈接:新手入門指導:Vue 2.0 的建議學習順序

編譯來源:夢想天空 ◆ 關註前端開發技術 ◆ 分享網頁設計資源


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 在解決了上一次關於超級話題積分bug後,又接到超級話題簽到提醒的產品需求。這是一篇偏於技術實現的文章,講述的比較籠統,業務圍繞超級話題的簽到提醒進行展開。如果,您對超級話題簽到提醒的技術背景與實現感興趣,那麼這篇文章希望對你有幫助。 產品 最近,在忙活超級話題的簽到提醒產品的開發。首先,這是第 ...
  • 一、前言 之前便瞭解過,Struts 2的核心控制器是一個Filter過濾器,負責攔截所有的用戶請求,當用戶請求發送過來時,會去檢測struts.xml是否存在這個action,如果存在,伺服器便會自動幫我們跳轉到指定的處理類中去處理用戶的請求,基本流程如下: 該流程筆者理解是基本流程,。如果有不對 ...
  • 1.1概述 用一個中介對象來封裝一系列的對象交互。中介者使各對象不需要顯示地相互引用,從而使其耦合鬆散,而且可以獨立地改變它們之間的交互。這就是中介者模式的定義。 一個對象含有另一個對象的引用是面向對象中經常使用的方式,也是面向對象所提倡的,即少用繼承多用組合。但是怎樣合理地組合對象對系統今後的擴展 ...
  • 實例範圍決定如何在請求之間共用服務。 原文地址:http://docs.autofac.org/en/latest/lifetime/instance-scope.html 每個依賴一個實例 使用這個選項,每次請求服務都會返回一個新實例。使用 InstancePerDependency() 指定。這 ...
  • 1.1概述 提供一種方法順序訪問一個聚合對象中的各個元素,而又不需要暴露對象的內部表示。這就是迭代器模式的定義。 合理組織數據的結構以及相關操作是程式設計的一個重要方面,比如在程式設計中經常會使用諸如鏈表、散列表等數據結構。鏈表和散列表等數據結構都是可以存放若幹個對象的集合,其區別是按照不同的方式進 ...
  • 1.UML簡介Unified Modeling Language (UML)又稱統一建模語言或標準建模語言。 簡單說就是以圖形方式表現模型,根據不同模型進行分類,在UML 2.0中有13種圖,以下是他們的主要用途簡介: 1.用例圖:對系統的使用方式分類. 2.類圖:顯示類和它們的相互關係。 3.對象 ...
  • 尾調用優化(Tail Call Optimization) 尾調用是指函數的最後一條語句是函數調用,比如下麵的代碼: 在ES5中,尾調用和其他形式的函數調用一樣:腳本引擎創建一個新的函數棧幀並且壓在當前調用的函數的棧幀上面。也就是說,在整個函數棧上,每一個函數棧幀都會被保存,這有可能造成調用棧占用內 ...
  • 在實際開發中,經常會遇到導入Excel文件的需求,有的產品人想法更多,想要在前端直接判斷文件內容格式是否正確,必填項是否已填寫 依據HTML5的FileReader,可以使用新的API打開本地文件(參考這篇文章) FileReader.readAsBinaryString(Blob|File) Fi ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...