前言
Vue 是一個非常有吸引力的構建前端的框架,它已迅速成為 React 和 Angular 等其他流行框架的替代品。它很敏捷速度很快,編寫的程式碼容易閱讀和理解,很有樂趣。它對初學者很友好,同時還提供了構建複雜應用和網站所需的基礎套件。這對於個人開發者來說非常棒,同時也可以在大型團隊中很好地進行協作開發。
為什麼 Vue 在 WordPress 專案中可以非常出色
不論是為 WordPress 開發小巧實用的功能還是開發一個完整的主題,Vue.js 都是一個合適的解決方案,因為它很輕量。Vue 使用易於理解的 HTML 模板。與其他一些框架不同,你不需要額外的工具即可開始使用。不需要使用webpack,Node.js 或其他配置就可以在網頁上引入 Vue 並開始建立元件,而且效能沒有任何明顯下降。只有當你想要將開發方法提升一個層次時,才需要這些工具。
Vue 在構建使用者介面上也更有優勢。如果你只是使用純 JavaScript 或 jQuery,Vue 將幫助你提高效率,減少繁瑣的程式碼。相比之下,一些更復雜的工具有更高的進入門檻,比如 React 和 Angular 這些。在 Vue 中使用 CSS 和動畫效果也更容易。通過 Vue 的“單檔案元件”,你可以輕鬆地的把屬於同一元件的不同部分合理組織的起來; JavaScript程式碼、HTML模板和 CSS 都寫在同一個檔案中,元件的不同部分保持相互獨立。如果你已經掌握了JavaScript, HTML, CSS 中的任何一種,那麼使用 Vue 可能會感覺更舒暢,在其他框架中編寫類似元件的體驗可能就並沒有這麼好了。
Vue 的另一個好處是,通過眾多的外掛來對 Vue 進行擴充套件補充也很容易。狀態管理有Vuex,路由管理有 vue-router,vue-resource 處理 Web 請求方面提供很多幫助。不必無休止地研究和比較不同的第三方專案的優缺點,例如 Reac t生態系統中的情況(這也是React更龐大的生態系統的缺點)。
學習Vue和相關外掛的教程
線上文件:
- Guide to Vue.js 官網必讀手冊
- Vuex是什麼? 官網文件
視訊教程:
- Learn Vue2: Step by Step laracasts上的視訊教程,初級部分是免費的.
- Vue.js 2 – Getting Started 是 Maxedapps 在 Youtube 上的免費視訊系列教程。他在Udemy也有付費課程,Maximilian Schwarzmüller講授的課程 非常有價值,
- Vue.js 2.0 in 60 minutes Traversy Media的最新版教程。這個頻道也有點意思:
Traversy 本人是一個有社交恐懼症的胖子,工作了很久之後決定從頭開始學習程式設計,併成功的成為一個自由職業程式設計師。他很感激程式設計這門技術給他帶來的一切,所以他也在油管上教授其他人程式設計。
他的特點是及其高產,零基礎,語速適中,口齒清晰。可以說是對非英語母語的人來說非常友好。
他的課程都是有始有終,始終把聽眾當作零基礎,所以有大量的從零開始課程(Crash Course), 配合上其適合非母語人士的語速和語音,絕對是國人想在油管上學習程式設計的首選。
頻道的課程涉獵非常廣,但主要集中在前端。對於現在流行的網路應用程式設計再合適不過了。
Traversy 的油管頻道的內容整理得非常清晰,強烈建議按照播放列表來收看。如果是完全在程式設計所有方面都是零基礎的,還希望對前端有些瞭解的,強烈建議從 HTML & CSS這個播放列表看起。然後,他每年都會發一篇關於這一年學習程式語言的方法和語言的選擇的建議視訊,搜尋年份號碼就能找到了,可以作為自己學習計劃很好的參考。
還有其他頻道介紹可以看這裡:
圖書:
這兩本評價都挺高,有能力的小夥伴可以買來看看
Vue.js 2 Cookbook: Build modern, interactive web applications with Vue.js (English Edition)
WordPress的教程資源
- Vue usage in WordPress. 作者 Paulund ,用Vue開發WordPress主題的一系列文章,寫的很棒,網站也很簡潔大方
- how to work with Vue & the REST API. 作者 Josh Pollock ,把 Vue 和 WordPress 的API結合實用的教程
- how to create a Vue plugin 作者 Ramsay Lanier, 關於怎樣寫Vue外掛
一些Vue和WordPress結合的專案
- experiment for Gutenberg 用Vue替代WordPress裡的React
- offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps. Vue結合WordPress構建單面應用
- Wyvern provides WordPress theme boiler plate 用Vue開發WordPress主題的腳手架專案
- Vue Theme用Vue開發的WordPress主題. 已經不更新了
- WordVue 一個用 Vue 開發 WordPress 主題的入門專案
One more thing
就像前文說的,如果你只是出於興趣想在個人專案中玩玩 Vue + WordPress,那麼其實用過不到Webpack等一系列的重型武器,直接引入Vue.js 就可以,即使用了也不用鑽的太深,基本上直接引用Vue提供的官方配置就行了。如果你想在前端開發水平上一個層次,後者在公司專案裡使用,那麼絕對要學好Webpack了。 Webpack 目前無論在求職還是工作中,使用越來越普及。而想要學懂,學會Webpack更絕非易事。推薦你慕課網這門課,《從基礎到實戰 手把手帶你掌握新版Webpack4》,融合技能+專案+思想 講解前端開發必學的Webpack,值得花錢好好學一下。本課程完整講清最新版本下的 Webpack 4 知識體系,通過 基礎 + 例項 + 原理程式碼編寫 + 複雜案例分析 完成Webpack4的分析與講解。更重要的是讓你對整個前端專案的構建有一個全域性化的認識,實現能力思想雙升級。