RogerZhong @ 2023-04
一、前端開發(fā)主流三大框架
Vue ： 尤雨溪主導(dǎo)開發(fā) （ 官網(wǎng)鏈接： https://cn.vuejs.org/ ）
React ：Facebook 主導(dǎo)開發(fā) （ 官網(wǎng)鏈接： https://react.dev/ ）
Angular ：Google 主導(dǎo)開發(fā) （ 官網(wǎng)鏈接： https://angular.cn/ ）
1、三大框架共同點(diǎn)
- 都是MVVM模式 —— Model，View，ViewModel
- Angular：數(shù)據(jù)綁定、操作Dom通過ViewModel完成的
- React和Vue的ViewModel的高效率通過框架自身提供的Virtual Dom（虛擬dom）來實(shí)現(xiàn)，它是一個js對象，數(shù)據(jù)的變化會被映射到這個虛擬Dom上，再去修改真實(shí)Dom結(jié)構(gòu)，比Angular的ViewModel直接綁定真實(shí)Dom樹的操作效率更高
2、三大框架優(yōu)缺點(diǎn)
| 框架 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
| Vue | 1. 國產(chǎn)框架，對國內(nèi)開發(fā)者更友好。所以它的學(xué)習(xí)成本是三個框架中最低的 2. 體積最小，加上它的處理機(jī)制，在非大型項(xiàng)目的對比中，它的性能是最高的。 3. vue會跟蹤每一個組件的依賴關(guān)系,不需要重新渲染整個組件樹 4. vue實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定,react數(shù)據(jù)流動是單向的 |
1. vue的響應(yīng)系統(tǒng)無法檢測屬性的添加和刪除，以及某些數(shù)組的修改 2. 發(fā)展的時間較短，生態(tài)環(huán)境更小 |
| React | 1. React本身不能算作一個框架，因?yàn)樗旧淼墓δ苡邢?，不過它有一個龐大的生態(tài)系統(tǒng)，全世界無數(shù)開發(fā)人員在為它提供開源包 2. 輕量：React和Vue的可組裝性強(qiáng)于angular，更加靈活 3. React的單項(xiàng)數(shù)據(jù)流機(jī)制 3. React-native，一個優(yōu)秀的移動端開發(fā)框架，使用react特有的jsx語法，將html融入到j(luò)s中，自動適配了不同的移動端的屏幕分辨率 4. state，所有的數(shù)據(jù)都儲存在state中，只可以使用setState方法去改變 |
1. React的靈活性就導(dǎo)致了在選擇上要耗費(fèi)成本，相同的功能也會有很多開源人員貢獻(xiàn)包（這一問題在vue上也同樣存在） 2. React的jsx語法，學(xué)習(xí)起來并不是很難，但它的寫法是把html和js結(jié)合起來，導(dǎo)致一些IDE無法格式化，代碼的可讀性較差 3. 使用Redux在處理數(shù)據(jù)流時，需要學(xué)習(xí)使用saga語法 4. 每當(dāng)應(yīng)用的狀態(tài)被改變時,全部組件都會重新渲染，所以需要shouldComponentUpdate生命周期函數(shù)方法控制 |
| Angular | 1. google有著穩(wěn)定的維護(hù)團(tuán)隊(duì)。google的Adwords業(yè)務(wù)就使用了angular，環(huán)境更穩(wěn)定 2. Angular + TypeScript( google+微軟 ) 3. Angular自帶了幾乎所有頁面應(yīng)具有的功能，路由、表單、ajax、模版、雙向數(shù)據(jù)綁定等等。它原生的form表單模塊非常強(qiáng)大，除了雙向綁定的基本功能，還自帶驗(yàn)證等 4. 它的每一個組件都是一個文件夾，html、js、和css文件是分開的，讓代碼更加清晰 |
1. 較難調(diào)試：Angular的代碼整潔、規(guī)范，很容易維護(hù)和審查，但控制臺報錯信息較差，較難看出問題在哪 2. 太重：它自帶了很多模塊，壓縮后達(dá)到了168k，而vue僅為50k。即使在4版本中拆分了一些功能，但依然還是很重 3. 學(xué)習(xí)成本高：它有很多的概念，有些還較難理解，api文檔內(nèi)容多，增大了閱讀難度。較難上手 |
二、Vue項(xiàng)目構(gòu)建方式
1、通過CDN使用Vue.js
- 創(chuàng)建html文件，引入vue.js
- 不需要使用 Node.js
index.html 示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Vue -- CDN</h1>
<div id="app">
<h2>{{msg}}</h2>
</div>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
msg: "HOHO"
}
}
}).mount('#app')
</script>
</body>
</html>
注： CDN 的全稱是 Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。
是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。
CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲和分發(fā)技術(shù)。
2、使用本地 vue.js 文件
將CDN中的js文件下載到本地，作為本地js文件資源引入后，使用vue
<body>
<div id="app">
<h2>{{msg}}</h2>
</div>
<!-- 使用本地vus.js文件 -->
<script type="text/javascript" src="../vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
msg: "HOHO hoho"
}
}
}).mount('#app')
</script>
</body>
3、使用 vue-cli 搭建項(xiàng)目
- 第一步： 安裝 Node.js
- 第二步： 使用 Node.js 安裝 vue-cli
- 第三步： 使用 vue-cli 命令創(chuàng)建項(xiàng)目
(1) 安裝 Node.js
Node.js發(fā)布于2009年5月，由Ryan Dahl開發(fā)，是一個基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境，使用了一個事件驅(qū)動、非阻塞式I/O模型，讓JavaScript 運(yùn)行在服務(wù)端的開發(fā)平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務(wù)端語言平起平坐的腳本語言。
Node.js對一些特殊用例進(jìn)行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好，V8引擎執(zhí)行Javascript的速度非?？?，性能非常好，基于Chrome JavaScript運(yùn)行時建立的平臺， 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。
Node.js 下載地址： https://nodejs.org/zh-cn/download
安裝過程中記得勾選上自動配置電腦環(huán)境變量的選項(xiàng)，然后一路Next即可，安裝完成后驗(yàn)證安裝結(jié)果：
（2）配置國內(nèi)鏡像
推薦方式：配置國內(nèi)鏡像
npm config set registry https://registry.npmmirror.com
可選方式：將npm切換為cnpm（淘寶鏡像）
npm install -g cnpm --registry=https://registry.npm.taobao.org
（3） 使用 Node.js 安裝 vue-cli
- 使用npm全局安裝 vue-cli
npm install -g @vue/cli
- 驗(yàn)證安裝結(jié)果
(3) 使用 vue-cli 命令創(chuàng)建項(xiàng)目
vue create mycli
- 使用vue命令創(chuàng)建項(xiàng)目，項(xiàng)目名稱為“mycli”
注意：項(xiàng)目名稱不能有大寫字符
- 在選擇項(xiàng)目配置界面中，可以選擇預(yù)設(shè)的配置，或者手動設(shè)置：
-
手動選擇需要的組件
按照項(xiàng)目實(shí)際需要選擇 選擇需要使用的Vue版本
后續(xù)選擇：歷史模式、配置文件、保存配置等，目前均使用默認(rèn)值，一路回車即可
項(xiàng)目創(chuàng)建完成后顯示提示
- 使用命令啟動項(xiàng)目
//進(jìn)入mycli目錄
cd mycli
//啟動項(xiàng)目
npm run serve
- 在瀏覽器中訪問項(xiàng)目
