初學者,學習vue應該從何下手?

Vue 概述

Vue (讀音 /vjuː/,類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層,不僅易於上手,還便於與第三方庫或既有項目整合。另一方面,當與現代化的工具鏈以及各種支持類庫結合使用時,Vue 也完全能夠爲複雜的單頁應用提供驅動。

兼容性:Vue 不支持 IE8 及以下版本,因爲 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。

開發者工具:在使用 Vue 時,我們推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個更友好的界面中審查和調試 Vue 應用。

那麼究竟什麼是Vue,有什麼作用?

Vue.js是一套用於構建用戶界面的漸進式框架,主要用於快速的構建前端界面,與其它大型的前端框架不同,Vue被設計爲可以自底向上逐層應用。

相比Angular.js來說,Vue的核心庫只關注視圖層,不僅易於上手,還便於與第三方庫或既有項目整合,是初創項目的前端首選框架。另一方面,當與現代化的工具鏈以及各種支持類庫結合使用時,Vue也完全能夠爲複雜的單頁應用提供驅動。

單獨來說,Vue.js是一個用於構建用戶界面的前端庫,本身就具有響應式編程和組件化的諸多優點。所謂響應式編程,即是一種面向數據流和變化傳播的編程範式,可以在編程語言中很方便地表達靜態或動態的數據流,而相關的計算模型會自動將變化的值通過數據流進行傳播。

 響應式編程在前端開發中得到了大量的應用,在大多數前端MVX框架都可以看到它的影子。相比較於Angular.js和React.js而言,Vue.js並沒有引入太多的新概念,只是對已有的概念進行了精簡。並且,Vue.js很好的借鑑了React.js的組件化思想,使應用開發起來更加容易,真正實現了模塊化開發的目的。

相比於Angular.js和React.js而言,Vue.js一直以輕量級、易上手而被人稱道。MVVM的開發模式也使前端從傳統的DOM操作中釋放出來,開發者不需要再把時間浪費在視圖和數據的維護上,只需要關注data的變化即可。並且,Vue的渲染層基於輕量級的virtual-DOM實現,在大多數的場景下初始化速度和內存消耗都提高2-4倍。同時,越來越多的移動客戶端也開始支持使用Vue.js來進行開發,可以堅信使用Vue.js打造三端一致的Native應用將變成可能。

作爲一個新興的前端框架,Vue.js大量借鑑和參考了Angular.js和React.js等優秀的前端框架。而在版本支持上,Vue.js拋棄了對IE8的支持,對移動端的支持也有一定的要求,也即是說使用Vue.js進行移動跨平臺開發時需要Android 4.2+和iOS 7+支持。

如果讀者所在的項目是一個前後端分離的項目,亦或者是一個創業項目,想使用Vue.js打造三端一致的Native體驗,那麼Vue.js將是一個不錯的選擇。

Vue 線路圖

俗話說,心急吃不了熱豆腐。對於一個新手,又如何學習Vue呢?怎樣可以快速的瞭解?爲了解答這些疑問,下面看一張Vue的技能圖。

JavaScript 與Web基礎

Vue 作爲一個用於構建 Web 用戶界面的 JavaScript 框架,在開始使用 Vue 之前,你必須瞭解 JavaScript 和 Web 開發的基礎知識。

並且還需要掌握一些 Vue.js 生態系統的核心知識,包括 Vue 核心庫、Vue Router 和 Vuex。

學習是一個艱苦的過程,當然如果能把技術學成,最後也一定可以獲得高薪工作。掌握一個好的學習方法,跟對一個學習的人非常重要。今後要是大家有啥問題,可以隨時來問我,能幫助別人學習解決問題,對於自己也是一個提升的過程。自己整理了一份最全面前端學習資料,從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理這是我的前端技術交流Q un++++++++++++++錢面是603----中間是985----後面是993----++++++++++++++有問題隨時在裏面問我,能給大家提出很多寶貴建議。

Vue 核心功能

從根本上說,Vue 就是一個用於同步網頁的JavaScript技術框架。實現這一目標的關鍵特性是反應式(reactive)數據,以及指令和插值等模板功能。

要構建一個 Vue 應用程序,你還需要知道如何在網頁中安裝 Vue,並瞭解 Vue 實例的生命週期等知識。

組件

其次,Vue 組件是獨立的可重用 UI 元素。因此,你需要了解如何聲明組件,以及如何通過 prop 和 event 在它們之間發生交互。

瞭解如何組合組件也很重要,因爲這對使用 Vue 構建健壯、可伸縮的應用程序來說至關重要。

單頁面應用程序

單頁面應用程序(SPA)架構通過單個網頁實現傳統多頁面網站一樣的功能,而且不會在每次用戶觸發導航時重新加載和重建頁面。

在將“頁面”構建爲 Vue 組件之後,就可以使用 Vue Router 將每個“頁面”映射到一個唯一的路徑,Vue Router 是一個用於構建 SPA 的工具,由 Vue 團隊維護。

狀態管理

隨着應用程序變得越來越大,項目變得越來越複雜,SPA 頁面中會有很多組件,管理全局狀態變得異常困難,而且隨着 prop 和 event 監聽器的增加,組件變得越來越臃腫。

這時候,一種稱爲Flux的特殊模式就出現了,它可以將數據保存在可預測且穩定的中央存儲中。由 Vue 團隊維護的 Vuex 庫可以幫助你在 Vue.js 應用程序中實現 Flux。

實戰中的Vue

如果你經常構建 Vue 應用程序,你會發現幾乎每個項目都需要提供配置、設置和開發者工具。

Vue 團隊維護了一個叫作 Vue CLI 的工具,讓你可以在幾分鐘內啓動一個強大的 Vue 開發環境。

全棧應用程序

在實際開發中,真實的 Vue 應用程序通常是由數據來驅動用戶界面渲染的。數據通常來自使用 Node、Laravel、Rails、Django 或其他服務器框架開發的 API。

這些數據可能是由傳統的 REST API 或 GraphQL 提供的數據,也可能是通過 Web 套接字提供的實時數據。

所以,你還需要了解將 Vue 集成到完整技術棧中常用設計模式,以及確保 Vue 應用程序用戶數據的安全性。

測試

如果你想開發出可維護且穩定的 Vue 應用程序,你還需要對它們進行測試(如單元測試、快照測試、黑盒測試等)。

在 Vue 應用程序中,可以通過單元測試來確保你的組件能夠爲給定輸入(即 prop 或用戶輸入)提供相同的輸出(即重新渲染的 HTML 或發出的事件)。

Vue 團隊維護了一個叫作 Vue Test Utils 的工具,用於測試單獨的 Vue 組件。

優化

當你將應用程序部署到遠程服務器並且用戶通過慢連接訪問它時,它與你在開發環境中測試的速度和效率是不一樣的。

爲了優化 Vue 應用程序,我們可以採用各種技術,包括服務器端渲染,也就是在服務器端執行 Vue 應用程序,然後輸出 HTML 頁面並傳給用戶。其他優化手段還包括使用異步組件和渲染函數。

開發工具

俗話說,磨刀不誤砍柴工,寫代碼也一樣,掌握Vue開發相關的工具和腳手架,可以大大的提高開發效率。

JavaScript 和 Babel

要獲得增強的 Vue 開發體驗,並利用新的瀏覽器功能,你可以使用最新的 JavaScript 標準 ES2015 和 ES2016 或更高版本提供的功能來構建 Vue 應用程序。

不過,如果你選擇使用現代 JavaScript,就需要提供一種支持舊版瀏覽器的方法,否則你的產品可能無法爲大多數用戶提供服務。

要實現這一目的,您可以使用 Babel。它的作用是在應用程序發佈之前將你的現代功能“轉換”(翻譯和編譯)爲標準語法,如將ES6翻譯爲瀏覽器能夠識別的ES5。

WebPack

Webpack 是模塊捆綁器,如果你的代碼跨越了不同模塊(例如不同的 JavaScript 文件),Webpack 可以將這些零散的代碼“構建”到瀏覽器可讀的單個文件中。

Webpack 還可以作爲構建管道,你可以在構建代碼之前對代碼進行轉換,例如使用 Babel、Sass 或 TypeScript,還可以使用一系列插件來優化你的應用程序。

很多開發人員覺得 Webpack 難以掌握,配置起來也很麻煩,但如果沒有它,將無法使用 Vue 的一些有用的功能(如單文件組件)。

最近發佈的 Vue CLI 3 提供了一種用於在 Vue 項目中抽象和自動配置 Webpack 的解決方案。

這是否意味着你不需要學習 Webpack 了?當然不是,因爲你仍然不可避免地需要進行定製或調試 Webpack 配置。

TypeScript

TypeScript 是 JavaScript 語言的超集,本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。爲我們提供了類型(如String、Boolean、Number 等),這樣我們就可以編寫健壯的代碼,並儘早發現錯誤。

於 2020 年推出的Vue.js 3版本 ,將完全使用 TypeScript 編寫。因此學習TypeScript顯得很有必要。

Vue 的框架

構建在 Vue 之上的框架可以讓你無需從頭開始實現服務器端渲染,還可以創建自己的組件庫以及定製很多其他常見的任務。

Nuxt.js

如果你想要構建一個高性能的 Vue 應用程序,就需要基於組件的路由、服務器端渲染、代碼拆分和其他功能進行實習。

Nuxt.js 作爲一個基於 Vue.js 的輕量級應用框架,可用來創建服務端渲染 (SSR) 應用,也可充當靜態站點引擎生成靜態站點應用,具有優雅的代碼結構分層和熱加載等特性。

Nuxt.js 通過各種社區插件提供了這些開箱即用的功能,以及更多的功能選項,如 PWA。

Vuetify

谷歌的 Material Design 是一個使用十分廣泛的頁面樣式指南,用於構建漂亮的邏輯用戶界面,並被用在谷歌的產品(如 Android 和 Web)當中。

Vuetify 在一系列 Vue 組件中實現了 Material Design。因此,你可以使用 Material Design 佈局和樣式快速構建 Vue 應用程序,以及模態、警報、導航欄、分頁等小部件。

Vuetify支持SSR(服務端渲染),SPA(單頁應用程序),PWA(漸進式web應用程序)和標準HTML頁面。

NativeScript-Vue

Vue.js 是一個用於構建 Web 用戶界面的庫。如果你想將它用於原生移動界面,可以使用 NativeScript-Vue 框架。

NativeScript 是一個用於在 iOS 和 Android 上使用原生用戶界面組件構建應用程序的系統,而 NativeScript-Vue 是一個基於 NativeScript 的框架,提供了 Vue 的語法和組件的使用方式。

其他

插件開發

如果要在項目中重用 Vue 功能或爲 Vue 生態系統做貢獻,可以將功能作爲 Vue 插件來開發。

動畫

如果你需要使用動畫,那麼你需要了解一下 Vue 的過渡系統,它也是 Vue 核心的一部分。你可以通過在向 DOM 添加元素或從 DOM 中刪除元素時應用動畫。

你需要創建 CSS 類來定義所需的動畫效果,無論是淡入淡出、更改顏色還是你喜歡的其他方式。當向 DOM 中添加元素或從 DOM 中刪除元素時,Vue 會檢測到這些變更,並在過渡期間添加或刪除相應的 CSS 類。

漸進式 Web 應用程序

漸進式 Web 應用程序(PWA)就像普通的 Web 應用程序一樣,只是加入了改進的用戶體驗。例如,PWA 可能包括脫機緩存、服務器端渲染、推送通知等。

大多數 PWA 功能可以通過 Vue CLI 3 插件或使用 Nuxt.js 等框架添加到 Vue 應用程序中,但你仍然需要了解一些關鍵技術,包括 Web App Manifest 和 ServiceWorker。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章