淺入深出Vue系列文章
之前大部分是在做后端,后來出於某些原因開始接觸Vue
。深感前端變化之大,各種工具、框架令人眼花繚亂。不過正是這些變化,讓前端開發更靈活。
博主在剛開始時,參考官網的各個步驟以及網上的博客。搭個環境,跑起來demo都費了大半天的勁。
本系列文章的初衷:
- 迅速的搭建起環境,不在環境、工具等其他因素上占用太多時間
Vue
框架由淺入深的理解部分知識點,能快速上手Vue
並將其實踐至項目中- 由
粗糙
到精致
,一步步優化代碼,了解並使用一部分關於代碼整潔、優化的知識 - 同時也是若羽對所學知識的一個鞏固
本系列文章將由始至終圍繞一個簡易的個人博客項目展開,在闡述的同時利用這個項目來連貫起來。
系列文章分為四個階段且均基於Vue-cli
,內容暫定為下:
同時,若羽將會在實踐的過程中不斷補充和完善目錄及內容。
基礎篇
工欲善其事必先利其器
- 工具准備之
WebStorm
安裝配置(已更新) - 工具准備之
PostMan
安裝篇安裝配置及Mock
服務配置(已更新) - 環境搭建(已更新)
- 數據綁定(已更新)
- 數據渲染(已更新)
- 事件處理(已更新)
- 路由(已更新)
- 組件(已更新)
- 子組件及數據傳遞(已更新)
本篇主要介紹從無到有,從0開始搭建一個項目。
並且介紹Vue
中的一些基本概念,為后面搭下基礎
主要會將
Vue
中的基礎概念盡可能以簡潔明了的方式闡述出來,圍繞着數據驅動
去闡述。
入門篇
Hello Wrold
本篇主要正式開始利用基礎篇所學到的知識開始寫一個真正的項目
並接觸如何與后端交互,如何渲染頁面,如何定義簡單的路由以及如何發布
當入門篇完結時,一個真實可以運行的小項目隨之誕生,享受自己創建的快樂吧 :)
提高篇
混亂的代碼會讓思維變得更加混亂
入門篇項目代碼 Gitee 地址:https://gitee.com/Exceptation/qianrushenchuvue
- 代碼整潔:封裝(已更新)
- 代碼整潔:去重(已更新)
- 代碼整潔:專一
- 代碼整潔:分層
- 代碼整潔:質量
- 待定
提高篇的主要內容是在入門篇的基礎上,對入門篇的代碼進行重構,對於細節的打磨。
當代碼/項目開始變得混亂時,維護起來將會花費比開發更多的時間,並且隨着時間,這個成本將會越大。
對於如何組織代碼,以及如何美化
代碼,提出一部分建議並輔以實例。
深入篇
優雅之道
- 依賴注入:控制反轉
- 全局異常處理
- 自動化路由(已更新)
- 待定
深入篇分兩部分,一部分講解依賴注入來為整個項目做解耦。另一個部分則是關於Vue
的部分特性/組件深入使用。
相關技術、工具
技術上將會涉及到以下部分,vue-router
之類的vue組件未細寫。
Vue
vue-cli
npm
ElementUI
開發工具上將會采用
WebStorm
采用WebStorm
的主要原因是因為提示、重構功能以及個人習慣。
也可以采用其它輕量級的工具,如:VsCode
, Sublime Text
, Atom
等,本系列文章將會使用WebStorm
。
最后
本系列文章,將會從以下幾個維度進行講解,確保不會因為工具、環境以及打包之類的其它因素分神,從而專注於鑽研Vue
以及開發的項目。
- 所需工具
- 環境安裝、配置
- 開發過程
- 發布
初次撰教程文,言辭不當或技術方面問題歡迎各位指教,用心討論,共同提升。