淺入深出Vue：前言

淺入深出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以及開發的項目。

• 所需工具
• 環境安裝、配置
• 開發過程
• 發佈

初次撰教程文，言辭不當或技術方面問題歡迎各位指教，用心討論，共同提高。