一、前端發展歷史
1、什麼是前端？
- 前端：針對瀏覽器的開發，程式碼在瀏覽器執行
- 後端：針對伺服器的開發，程式碼在伺服器執行
2、前後端不分的時代
網際網路發展的早期，前後端開發是一體的，前端程式碼是後端程式碼的一部分。
就比如使用HTML(5)、CSS(3)、JavaScript(ES5、ES6)來編寫一個個的頁面，然後發給後端(PHP、Python、Go、Java) ，後端收到瀏覽器的請求再嵌入模板語法、渲染完資料返回資料給前端，最終在瀏覽器中檢視。
3、後端 MVC 的開發模式
那時的網站開發，採用的是後端 MVC 模式，而前端只是後端 MVC 的 V。
- Model（模型層）：提供/儲存資料
- Controller（控制層）：資料處理，實現業務邏輯
- View（檢視層）：展示資料，提供使用者介面
MVC框架詳細介紹：Django框架之python後端框架介紹 - Xiao0101 - 部落格園 (cnblogs.com)
4、Ajax（前後端分離的雛形）
Ajax 技術誕生，改變了一切。
- 2004年：Gmail
- 2005年：Google 地圖
前端不再是後端的模板，可以獨立得到各種資料。前端可以單用Ajax來載入資料，DOM渲染頁面。並且Ajax 技術也促成了 Web 2.0 的誕生。
- Web 1.0：靜態網頁，純內容展示
- Web 2.0：動態網頁，富互動，前端資料處理
5、MVVM模式
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，是一種事件驅動程式設計方式。那時另一些框架提出 MVVM 模式，用 View Model 代替 Controller。
拿vue為例：
- Model：vue物件的data屬性裡面的資料，這裡的資料要顯示到頁面中（js變數）
- View：vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” （HTML+CSS）
- View-Model：vue中編寫程式碼時的vm物件，它是vue.js的核心，負責連線 View 和 Model資料的中轉，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的（響應式[雙向資料繫結]：JS中變數變了，HTML中資料也跟著改變）
本質：view 繫結 view-model，檢視與資料模型強耦合。資料的變化實時反映在 view 上，不需要手動處理。
6、SPA（單頁面應用）
不僅控制整個頁面，還負責處理抓取新資料，並在無需重新載入的前提下處理頁面切換。這種型別的應用通常稱為單頁應用 (Single-Page application，縮寫為 SPA)。
前端可以做到：
- 讀寫資料
- 切換檢視
- 使用者互動
這意味著，網頁其實是一個應用程式。
2010年後，前端工程師從開發頁面，變成了開發“前端應用”（跑在瀏覽器裡面的應用程式）。
- 傳統的架構
- 單頁應用的架構
7、Angular框架
-
Google 公司推出的 Angular 在那時是最流行的 MVVM 前端框架。它的風格屬於 HTML 語言的增強，核心概念是雙向繫結。
-
Angular框架的出現（1個JS框架）：導致出現了“前端工程化”的概念（前端也是1個工程、1個專案）
8、React、Vue框架
React、Vue框架是當下最火的2個前端框架（Vue：國人喜歡用，React：外國人喜歡用）
-
vue的基本思想與 Angular 類似，但是用法更簡單，而且引入了響應式程式設計的概念。
-
React是一種用於構建使用者介面的javaScript庫，它主要用來寫html，或構建web應用。React 的核心思想是“宣告式程式設計”，也就是說，開發人員可以專注於定義元件的外觀和行為，而不必擔心實現細節。
-
React 強調元件化開發思想，將整個 UI 拆分成小元件，並在這些元件之間建立清晰的層次關係，而 Angular 和 Vue.js 等框架則更加註重整個應用程式的架構設計。
React知識點詳情：react知識點總結 - 簡書 (jianshu.com)
9、大前端時代
-
移動開發（Android+IOS） + Web（Web+微信小程式+支付寶小程式） + 桌面開發（Windows桌面）：前端 ---> 大前端
-
一套程式碼在各個平臺執行（大前端）：谷歌Flutter（Dart語言：和Java很像）可以執行在IOS、Android、PC端
10、uni-app
uni-app（uni，讀you ni，是統一的意思）是一個使用Vue.js開發所有前端應用的框架，開發者實現了一套程式碼，同時執行到多個平臺；一套程式碼，可釋出到iOS、Android、Web（響應式）、以及各種小程式、快應用等多個平臺。
二、Vue的安裝
1、IDE整合開發工具
- 前端開發：vue，react可以使用vscode或者webstorm
- 因為webstorm 是jetbrains全家桶，用起來跟pycharm一樣，比較熟悉
- vscode也很好用，最大的優點就是免費
2、Vue2安裝
Vue現在有Vue2和Vue3，因為Vue3相容Vue2，並且兩者語法也有點差異，所以我們先從Vue2開始學起，後面再學習Vue3。
- Vue2官方文件
- https://v2.cn.vuejs.org/
- Vue3官方文件
- https://cn.vuejs.org/
- 作者：尤雨溪
注意：在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!
（1）CDN引入
-
對於開發或學習：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
-
對於生產環境，我們推薦連結到一個明確的版本號和構建檔案，以避免新版本造成的不可預期的破壞
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
（2）本地引入
- 開發版本：https://v2.cn.vuejs.org/js/vue.js 包含完整的警告和除錯模式
- 生產版本：https://v2.cn.vuejs.org/js/vue.min.js 刪除了警告
- 推薦安裝穩定版本：2.7.16
詳細請檢視官方文件：安裝 — Vue.js (vuejs.org)
（3）Vue3引入
- CDN引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- 本地引入
- https://unpkg.com/vue@3/dist/vue.global.js
（4）對不同構建版本的解釋（只針對Vue2版本）
在其他cdn加速的網站中，你將會找到很多不同的 Vue.js 構建版本。這裡列出了它們之間的差別：
| UMD | CommonJS | ES Module (基於構建工具使用) | ES Module (直接用於瀏覽器) | |
|---|---|---|---|---|
| 完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| 只包含執行時版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| 完整版 (生產環境) | vue.min.js | - | - | vue.esm.browser.min.js |
| 只包含執行時版 (生產環境) | vue.runtime.min.js | - | - | - |
三、補充
1、選項式 API 和組合式 API
- vue2是選項式 API
- vue3兩個都支援：但是推薦使用組合式api
2、node.js
node.js的形成過程：把谷歌瀏覽器的v8引擎---> 用c語言重寫了---> 能執行再作業系統上---> 形成nodejs
3、 javascript和Ecmascript
- JS是由ECMAScript、DOM、BOM組成
- JS是執行在瀏覽器指令碼的語言
4、typescript
TypeScript是微軟開發的一個開源的程式語言，透過在JavaScript的基礎上新增靜態型別定義構建而成。TypeScript透過TypeScript編譯器或Babel轉譯為JavaScript程式碼，可執行在任何瀏覽器，任何作業系統。
5、CSS框架
CSS框架是預先準備好的軟體框架，允許使用層疊樣式表語言更容易，更符合標準的進行網頁設計。大多數這些框架包含至少一個柵格設計（grid）。功能更強大的框架，還配備了更多的功能和附加的基於JavaScript的功能，但大多設計導向的和Unobtrusive JavaScript。本文從功能和充分的JavaScript框架區分它們。
兩個顯著和廣泛應用例子是Bootstrap和Foundation (framework)。其他awsm.css, Flexify, Materialize, Semantic UI。
一些更為大型的框架會使用CSS的直譯器。例如LESS和Sass。