《Vue 3基礎(chǔ)入門》課件 第一章 vue 3簡介

Vue3簡介Contents目錄Web前端框架01認(rèn)識Vue302選擇IDE0304050607配置Node.js環(huán)境安裝Vue3熟悉vue-devtools調(diào)試工具本章小結(jié)01Web前端框架PART前端框架的誕生在第一次瀏覽器戰(zhàn)爭中，Netscape被微軟擊敗后創(chuàng)辦了Mozilla技術(shù)社區(qū)。該社區(qū)推出了符合W3C標(biāo)準(zhǔn)的Firefox瀏覽器，它和Opera瀏覽器一起代表了W3C陣營，并與IE瀏覽器開始了第二次瀏覽器戰(zhàn)爭。不同的瀏覽器技術(shù)標(biāo)準(zhǔn)之間存在較大的差異，這給開發(fā)帶來了兼容性問題。為了解決這個問題，出現(xiàn)了一些前端兼容框架，如Dojo、Mooltools、YUI、ExtJS和jQuery等，其中jQuery的應(yīng)用范圍最為廣泛。近年來各大瀏覽器開始支持HTML5，前端實現(xiàn)的交互功能隨之增加，相應(yīng)的代碼復(fù)雜度顯著提高，用于后端的MVC模式開始應(yīng)用于Web前端開發(fā)。從2010年10月出現(xiàn)的Backbone開始，Knockout、Angular、Ember、React、Vue等框架相繼出現(xiàn)。這些框架的應(yīng)用使WebSite從WebSite進(jìn)化成WebApp，并開啟了WebApp的SPA（SinglePageApplication，單頁面應(yīng)用）時代。MVC模式典型的MVC模式：MVC模式使用MVC模式設(shè)計和創(chuàng)建Web前端應(yīng)用時，通常將程序分為以下3個部分：1）Model用于表示應(yīng)用程序的核心數(shù)據(jù)部分。2）View用于展示效果、生成HTML頁面等。3）Controller用于處理輸入，如業(yè)務(wù)邏輯等。MVC模式MVC模式的優(yōu)點主要有以下三個1）松耦合性2）高重用性3）低生命周期成本從MVC到MVVMMVP模式是從MVC模式演變而來的，其基本思想與MVC模式相似ViewPresenterModelMVP模式從MVC到MVVMMVVM模式將MVP模式的View的狀態(tài)和行為抽象化，并將視圖UI和業(yè)務(wù)邏輯分離02認(rèn)識Vue3PART什么是Vue3Vue3是一個基于MVVM模式的用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，可以根據(jù)項目的復(fù)雜度和需求靈活地選擇不同的層次和功能對于簡單的系統(tǒng)，可以采用Vue3的聲明式渲染機(jī)制；對于復(fù)雜的系統(tǒng)，可以方便地接入Vue3組件系統(tǒng)、Vue-router前端路由和Vuex狀態(tài)管理等功能，實現(xiàn)前后端分離項目或者多組件狀態(tài)共享的需求Vue3提供的構(gòu)建系統(tǒng)可以幫助開發(fā)者快速地構(gòu)建一個腳手架項目，并提供了運行環(huán)境和打包工具等功能，方便開發(fā)、調(diào)試和構(gòu)建發(fā)布版本。漸進(jìn)式框架的分層結(jié)構(gòu)什么是Vue3Vue3的改進(jìn)可總結(jié)為以下8點：1、全面提高了性能2、編譯體積更小3、CompositionAPI4、組件多節(jié)點支持5、更靈活的組件渲染6、更先進(jìn)的組件7、更好地支持TypeScript8、支持自定義渲染APIVue3的優(yōu)勢相對于其他Web前端框架，Vue3主要有以下5個優(yōu)勢。1、體積較小，壓縮后只有33KB。2、基于虛擬DOM技術(shù)，通過預(yù)先進(jìn)行各種計算來優(yōu)化DOM對象的操作，避免直接操作DOM對象，具有更高的運行效率。3、支持雙向數(shù)據(jù)綁定，使開發(fā)人員無須直接操作DOM對象，可以將更多精力投入到業(yè)務(wù)邏輯上。4、生態(tài)豐富，具有較低學(xué)習(xí)成本，市場上存在許多成熟穩(wěn)定的基于Vue3的UI框架和組件，可快速實現(xiàn)開發(fā)。5、對于初學(xué)者友好，易于入門，并提供大量學(xué)習(xí)資料03選擇IDEPART選擇IDE對于開發(fā)者而言，優(yōu)秀的IDE(

Integrated

DevelopmentEnvironment，集成開發(fā)環(huán)境)可以極大地提高開發(fā)效率，VSCode（VisualStudioCode）是微軟推出的一款輕量級代碼編輯器，它免費、開源而且功能強(qiáng)大。它支持幾乎所有主流的程序語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號匹配、代碼片段、代碼對比Diff、GIT等特性及插件擴(kuò)展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化，軟件跨平臺支持Windows、macOS及Linux。04配置Node.jsPART配置Node.js環(huán)境打開Node.js官網(wǎng)/，找到Node.js下載頁面，如圖所示。配置Node.js環(huán)境根據(jù)系統(tǒng)版本下載相應(yīng)的Node.js安裝包，雙擊下載文件會出現(xiàn)如圖所示的安裝頁面，按照提示選項完成Node.js的安裝。配置Node.js環(huán)境除了上述方法外，macOS用戶也可以使用Homebrew進(jìn)行Node.js的安裝。安裝Homebrew后，在控制臺執(zhí)行brewinstallnode@14就可以方便地安裝Node.js14，如圖所示。配置Node.js環(huán)境執(zhí)行node-v指令和npm-v指令可以查看node版本和npm版本。05安裝Vue3PART獨立安裝版本獨立版本安裝需要以下兩個步驟，本質(zhì)是將編譯好的Vue3的JavaScript腳本下載到本地，和現(xiàn)有項目一起部署在服務(wù)器上，并在頁面中引用。1、下載Vue3?？梢栽赩ue3的官網(wǎng)上下載最新版本。/vue@3.2.31/dist/vue.global.js。2、引入Vue3。在HTML文件中用標(biāo)簽<script>引入Vue3文件。CDN方式安裝Vue3給出了一個推薦的CDN鏈接，在頁面中使用<script>標(biāo)簽引入，<scriptsrc="/vue@next"></script>對于生產(chǎn)環(huán)境，推薦連接一個明確的版本號和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞<scriptsrc="/vue@3.2.31/dist/vue.global.js"></script>如果使用原生ESModule，可以導(dǎo)入一個兼容ESModule的構(gòu)建文件<scripttype="module">importVuefrom'/npm/vue@3.2.31/dist/d.js'</script>npm方式安裝安裝Vue3#最新穩(wěn)定版$npminstallvue@next更新Vue3#最新穩(wěn)定版$npmupdatevue@next卸載Vue3#最新穩(wěn)定版$npmuninstallvue@next有時訪問npm源速度會很慢，建議使用淘寶npm鏡像。更改npm鏡像源使用以下命令$npminstall-gcnpm–registry=然后可以使用cnpm來安裝模塊$cnpminstallvue@next使用前端腳手架安裝前端腳手架指通過選擇幾個選項快速搭建項目基礎(chǔ)代碼的工具。常見的Vue3腳手架有VueCLI和Vite，第9章會詳細(xì)講解。前端腳手架會在初始化的時候自動地幫助開發(fā)者安裝好Vue3。06熟悉vue-devtools調(diào)試工具PART熟悉vue-devtools調(diào)試工具vue-devtools是一款基于Chrome瀏覽器的插件，它用于調(diào)試Vue3應(yīng)用，可以極大地提高調(diào)試效率。vue-devtools的安裝方式有以下兩種。1.從Chrome商店中安裝vue-devtools可以從Chrome商店中直接下載安裝。2.手動安裝（1）在命令行中執(zhí)行g(shù)itclone/vuejs/vue-devtools.git命令，將Github項目

克隆到本地（2）在命令行中執(zhí)行npminstall命令，安裝項目所需的npm包。（3）在命令行中