《數(shù)據(jù)可視化技術(shù)》單元21Vue.js開發(fā)基礎(chǔ)01準(zhǔn)備活動點名、復(fù)習(xí)本次課學(xué)習(xí)內(nèi)容、學(xué)習(xí)目標(biāo)介紹學(xué)習(xí)內(nèi)容本單元學(xué)習(xí)使用Vite創(chuàng)建Vue3項目。任務(wù)1、Node.js的下載和安裝任務(wù)2、創(chuàng)建Vue3項目任務(wù)3、使用組合式API開發(fā)項目學(xué)習(xí)目標(biāo)1、知識（1）了解Vue的特性，能夠說出Vue的4個特性（2）掌握Node.js環(huán)境的搭建，能夠獨立完成Node.js的下載和安裝（3）掌握常見的包管理工具的使用方法，能夠應(yīng)用npm和yarn相關(guān)命令（4）掌握Vite的使用方法，能夠使用Vite創(chuàng)建Vue3項目（5）熟悉選項式API和組合式API，能夠說出選項式API和組合式API的區(qū)別2、技能（1）能夠下載和安裝Node.js（2）能夠使用npm和yarn相關(guān)命令（3）能夠使用Vite創(chuàng)建Vue3項目（4）能夠使用組合式API開發(fā)3、素養(yǎng)（1）嚴(yán)謹(jǐn)認(rèn)真、代碼規(guī)范；（2）數(shù)據(jù)安全、愛國精神；（3）信息檢索能力02發(fā)展活動任務(wù)分析、任務(wù)資訊、演示講解、任務(wù)實施什么是Vue1為了提高開發(fā)效率，市面上出現(xiàn)了基于MVVM模式的前端開發(fā)框架，例如Angular、React、Vue等。這些框架以數(shù)據(jù)為核心，使用戶關(guān)注業(yè)務(wù)邏輯的處理，減少了手動的DOM操作。這些框架還為開發(fā)者提供了一套開發(fā)規(guī)則，控制權(quán)在框架本身，用戶需要按照框架的規(guī)范進行開發(fā)。與jQuery相比，使用框架開發(fā)的項目具有更高的開發(fā)效率、更好的可維護性、更強的可擴展性和更高的性能。在Angular、React和Vue這3個框架中，Vue體積較小，在使用上更容易上手、更加靈活。1.1什么是Vue1.1什么是VueVue（讀音：/Vju?/）是一款用于構(gòu)建用戶界面的漸進式框架。其中，“漸進式”是指在使用Vue核心庫時，可以在核心庫的基礎(chǔ)上根據(jù)實際需要逐步增加功能。1.1什么是Vue使用Vue進行項目開發(fā)具有以下優(yōu)勢。輕量級。Vue是一個輕量級的前端開發(fā)框架，文件體積小。Vue項目基于JavaScript語言開發(fā)，開發(fā)者不用單獨學(xué)一門陌生的語言，從而降低了學(xué)習(xí)的門檻。Vue在使用上比較靈活，開發(fā)人員可以選擇使用Vue開發(fā)一個全新項目，也可以將Vue引入現(xiàn)有項目。1.1什么是VueVue通過虛擬DOM技術(shù)減少對DOM的直接操作，并通過盡可能簡單的API來實現(xiàn)響應(yīng)的數(shù)據(jù)綁定，可支持單向和雙向數(shù)據(jù)綁定。Vue支持組件化開發(fā)，可提高項目的開發(fā)效率和可維護性，使代碼更易于復(fù)用，便于團隊的協(xié)同開發(fā)。Vue可以與前端開發(fā)中用到的一系列工具以及各種支持庫結(jié)合使用，以實現(xiàn)前端工程化開發(fā)，從而提高了項目的開發(fā)效率，降低了大型項目的開發(fā)難度。1.1什么是VueVue是基于MVVM模式的框架。MVVM主要包含Model（數(shù)據(jù)模型）、View（視圖）和ViewModel（視圖模型）。其中，Model是指數(shù)據(jù)部分，負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)的處理；View是指視圖部分，即用戶界面，負(fù)責(zé)視圖處理；ViewModel用于連接視圖與數(shù)據(jù)模型，負(fù)責(zé)監(jiān)聽Model或者View的改變。1.1什么是VueVue的基本工作原理如下圖所示。1.什么是VueView和Model不能直接通信，它們需要借助ViewModel才能進行通信。ViewModel相當(dāng)于一個觀察者，監(jiān)控著View和Model的動作，實現(xiàn)了View與Model的解耦。ViewModel包含DOMListeners和

DataBindings。其中，DOMListeners用于監(jiān)聽View中DOM變化，并在DOM變化時通知Model做出相應(yīng)的修改；DataBindings用于監(jiān)聽Model中的數(shù)據(jù)變化，并在數(shù)據(jù)變化時通知View做出相應(yīng)的修改。1.2Vue的特性Vue的4個特性。數(shù)據(jù)驅(qū)動視圖雙向數(shù)據(jù)綁定插件指令1.2Vue的特性在使用Vue的頁面中，Vue會監(jiān)聽數(shù)據(jù)變化，當(dāng)頁面數(shù)據(jù)發(fā)生變化時，Vue會自動重新渲染頁面結(jié)構(gòu)，如下圖所示。1.數(shù)據(jù)驅(qū)動視圖1.2Vue的特性Vue實現(xiàn)了雙向數(shù)據(jù)綁定，即當(dāng)數(shù)據(jù)發(fā)生變化時，視圖也會發(fā)生變化；當(dāng)視圖發(fā)生變化時，數(shù)據(jù)也會跟著同步變化。例如，用戶在填寫表單時，雙向數(shù)據(jù)綁定可以輔助開發(fā)者在無須手動操作DOM的前提下，自動同步用戶填寫的內(nèi)容數(shù)據(jù)，從而獲取表單元素最新的值。2.雙向數(shù)據(jù)綁定1.2Vue的特性指令主要包括內(nèi)置指令和自定義指令，內(nèi)置指令是Vue本身自帶的指令，而自定義指令是由用戶自己定義的指令。指令的名稱以“v-”開頭，作用于HTML中的元素。將指令綁定在元素上時，指令會給綁定的元素添加一些特殊的行為。例如，v-bind指令用于實現(xiàn)單向數(shù)據(jù)綁定，v-if指令用于實現(xiàn)頁面條件渲染，v-for指令用于實現(xiàn)頁面列表渲染等。3.指令1.2Vue的特性Vue支持插件，通過加載插件可以實現(xiàn)更多的功能。常用的插件有VueRouter（路由）、Vuex（狀態(tài)管理庫）、Pinia（輕量級狀態(tài)管理庫）等，這些插件經(jīng)過簡單配置就可以使用。4.插件1.3Vue的版本目前，Vue共有3個大版本，分別是Vue

1、Vue2和Vue3。其中，Vue1幾乎被淘汰，不建議學(xué)習(xí)與使用；Vue2和Vue3目前被廣泛應(yīng)用，并且Vue3將會逐步替代Vue2。1.3Vue的版本Vue3支持Vue2中絕大多數(shù)的API與特性，同時Vue3還新增了一些特有的功能，并廢棄了Vue2中的一些舊功能。Vue3新增的功能包括組合式（Composition）API、多根節(jié)點組件等；廢棄的舊功能包括過濾器（Filter）以及$on()、$off()和$once()實例方法等。雖然從表面上看，Vue3和Vue2的使用方式?jīng)]有太大的差異，但Vue3的底層代碼發(fā)生了很大變化，包括渲染、數(shù)據(jù)監(jiān)聽、雙向綁定、生命周期等。1.3Vue的版本Vue3的新特性如下。體積更小，采用按需編譯的方式編譯出來的文件體積比Vue2的小。性能提升，運行速度比Vue2快1.5倍左右。具有更好的TypeScript支持。暴露了更底層的API，可以通過多種方式組織代碼，代碼使用上更加靈活。提供了更先進的組件。Vue創(chuàng)建了一個虛擬的Fragment節(jié)點，允許組件中有多個根節(jié)點。提供組合式API，能夠更好地組合邏輯、封裝邏輯、復(fù)用邏輯。1.3Vue的版本為了提高開發(fā)效率，開發(fā)者可以在項目中添加UI組件庫。UI組件庫可以理解成一個可重復(fù)使用的界面設(shè)計元素的集合體，使用它可以更快速地開發(fā)用戶界面。目前，主流UI組件庫都已經(jīng)發(fā)布了支持Vue3的版本，常用的UI組件庫如下。Element

Plus組件庫：一款基于Vue3的桌面端組件庫。Vant組件庫：一款開源移動端組件庫，它從3.0版本開始支持Vue3。Ant

Design

Vue組件庫：一款用于開發(fā)和服務(wù)企業(yè)級后臺產(chǎn)品的組件庫，它從2.0版本開始支持Vue3。Vue開發(fā)環(huán)境22.1VisualStudioCode編輯器VisualStudioCode（簡稱VSCode）是由微軟公司推出的一款免費、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對于前端開發(fā)人員來說，一個強大的編輯器可以使開發(fā)變得簡單、便捷、高效。2.1VisualStudioCode編輯器VSCode編輯器具有以下特點。輕巧、極速，占用系統(tǒng)資源較少。具備代碼智能補全、語法高亮顯示、自定義快捷鍵和代碼匹配等功能。跨平臺，可用于macOS、Windows和Linux操作系統(tǒng)。主題界面的設(shè)計比較人性化。例如，可以快速查找文件并直接進行開發(fā)，可以通過分屏顯示代碼，可以自定義主題顏色，以及可以快速查看已打開的項目文件和項目文件結(jié)構(gòu)。提供豐富的擴展，用戶可根據(jù)需要自行下載和安裝擴展。2.1VisualStudioCode編輯器將VSCode編輯器安裝完成后，該編輯器的默認(rèn)語言是英文。如果想要切換為中文，首先單擊VSCode編輯器的初始界面左側(cè)邊欄中的“”圖標(biāo)按鈕進入擴展界面，然后在搜索框中輸入關(guān)鍵詞“chinese”找到中文語言擴展，單擊“Install”按鈕進行安裝，如下圖所示。安裝中文語言擴展2.1VisualStudioCode編輯器安裝成功后，需要重新啟動VSCode編輯器，中文語言擴展才可以生效。重新啟動VSCode編輯器后，VSCode編輯器的中文界面如下圖所示。2.1VisualStudioCode編輯器Volar擴展專門用于為“.vue”單文件組件（Single-FileComponent，SFC）提供代碼高亮顯示和語法支持。該擴展僅適用于Vue3項目，不僅提供了語法高亮顯示、智能提示、錯誤提示、格式化等功能，而且支持多根節(jié)點組件，例如支持將一個Vue文件中的<template>、<script>、<style>拆分成3個窗口，每個窗口負(fù)責(zé)各自的功能。

安裝Volar擴展2.1VisualStudioCode編輯器Volar擴展的安裝方法與中文語言擴展的安裝方法類似。如果想要安裝Volar擴展，可以在擴展界面的搜索框中輸入關(guān)鍵詞“Volar”，搜索到“VueLanguageFeatures(Volar)”擴展后進行安裝。需要注意的是，Vue3的組件代碼與Vue2不同，使用的語法提示和高亮插件也不同。在Vue2中不能使用Volar擴展，而是使用Vetur擴展，可以在擴展界面的搜索框中輸入關(guān)鍵詞“Vetur”，搜索到“Vetur”擴展后進行安裝。2.1VisualStudioCode編輯器在實際開發(fā)中，開發(fā)一個項目需要先創(chuàng)建項目文件夾，以便于保存項目中的文件。接下來演示如何創(chuàng)建項目文件夾，如何使用VSCode編輯器打開項目文件夾，以及如何創(chuàng)建一個HTML5文檔，具體步驟如下。使用VSCode編輯器2.1VisualStudioCode編輯器在D:\vue目錄下創(chuàng)建一個項目文件夾chapter01。創(chuàng)建項目文件夾步驟1步驟3步驟22.2 Node.js環(huán)境Node.js是一個基于V8引擎的JavaScript運行環(huán)境，提供了一些功能性的API，例如文件操作API、網(wǎng)絡(luò)通信API等。2.2 Node.js環(huán)境打開Node.js官網(wǎng)，找到Node.js下載地址，如下圖所示。2.2 Node.js環(huán)境從Node.js官方網(wǎng)站可以看出，Node.js有兩個版本，分別是16.17.0LTS和18.9.0Current。其中，LTS（LongTermSupport）表示提供長期支持的版本，只進行Bug修復(fù)且版本穩(wěn)定，因此有很多用戶在使用；Current表示當(dāng)前發(fā)布的新版本，增加了一些新特性，有利于進行新技術(shù)的開發(fā)使用。這里選擇下載16.17.0LTS版本。下載完成后會得到一個名稱為node-v16.17.0-x64.msi的安裝包文件。2.2 Node.js環(huán)境雙擊node-v16.17.0-x64.msi安裝包圖標(biāo)，會彈出安裝向?qū)Т翱?，如下圖所示。安裝過程全部使用默認(rèn)值。2.2 Node.js環(huán)境安裝完成后，測試一下Node.js是否安裝成功，具體步驟如下。2.2 Node.js環(huán)境按“Windows+R”組合鍵，打開“運行”對話框，輸入“cmd”。在“運行”對話框中輸入“cmd”后的效果如下圖所示。打開“運行”對話框步驟1步驟3步驟22.2 Node.js環(huán)境單擊“確定”按鈕或者直接按“Enter”鍵，會打開命令提示符，如下圖所示。打開命令提示符步驟1步驟3步驟22.2 Node.js環(huán)境在命令提示符中，輸入命令“node-v”，其中v是version的簡寫，表示版本。命令輸入完成后，按“Enter”鍵，查看當(dāng)前安裝的Node.js版本，如下圖所示。查看Node.js版本若想要退出命令提示符，可以輸入“exit”并按“Enter”鍵，或者單擊右上角的“×”關(guān)閉按鈕退出。步驟1步驟3步驟22.3常見的包管理工具什么是包呢？2.3常見的包管理工具在Vue項目開發(fā)中，經(jīng)常需要通過各種第三方的包（package）來擴展項目的功能?！鞍笨梢岳斫鉃閷⒁幌盗心K化的代碼打包起來，形成一個包，以便于使用。項目中所用到的包稱為項目的依賴（dependency）。2.3常見的包管理工具什么是包管理工具呢？2.3常見的包管理工具為了方便管理第三方的包，需要用到包管理工具。包管理工具可以讓開發(fā)人員輕松地下載、升級、卸載包。假設(shè)在項目開發(fā)時，沒有包管理工具，若想使用第三方包，則每次都需要下載、解壓后才可以使用，非常煩瑣。而使用包管理工具，只需通過一條命令即可下載并安裝第三方包，非常方便，而且還可以指定下載的版本等。2.3常見的包管理工具npm是Node.js默認(rèn)的包管理工具，它可以安裝、共享、分發(fā)代碼，還可以管理項目的依賴關(guān)系。npmyarn是Node.js的包管理工具，它是一個高效、安全和可靠的包管理工具，yarn能夠提高包的安裝效率，節(jié)約安裝時間。yarn常見的包管理工具2.3常見的包管理工具在安裝Node.js時會自動安裝相應(yīng)版本的npm，不需要單獨安裝，使用“npm-v”命令可以查看npm的版本，如下圖所示。1.npm2.3常見的包管理工具使用npm包管理工具可以解決以下場景的需求。從npm服務(wù)器下載別人編寫的第三方包到本地使用。從npm服務(wù)器下載并安裝別人編寫的命令行程序到本地來使用。將自己編寫的包或命令行程序上傳到npm服務(wù)器供別人使用。2.3常見的包管理工具npm提供了快速操作包的命令，只需要執(zhí)行簡單的命令就可以很方便地對第三方包進行管理。npm中常用的命令如下。npminstall包名：可簡寫為“npmi包名”，用于為項目安裝指定名稱的包。如果加上-g選項，則會把包安裝為全局包，否則只安裝到本項目中。如果省略包名，則npm會根據(jù)當(dāng)前目錄下的package.json文件中保存的依賴信息為項目安裝所有的包。npmuninstall包名：用于卸載指定名稱的包。npmupdate包名：用于更新指定名稱的包。2.3常見的包管理工具在下載npm安裝包時，下載速度可能會比較慢，這是因為提供包的服務(wù)器在國外。為了加快包的下載速度，建議將下載源切換成國內(nèi)鏡像服務(wù)器。為npm設(shè)置鏡像地址的具體命令如下。npmconfigsetregistry為了驗證鏡像地址是否設(shè)置成功，可以通過如下命令進行驗證。npmconfiggetregistry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。2.3常見的包管理工具在使用yarn之前，需要先確保計算機中已經(jīng)安裝了Node.js環(huán)境，再使用npm命令安裝yarn，安裝命令如下。npminstallyarn-g為了驗證yarn是否安裝成功，可以通過“yarn-v”命令查看yarn的版本信息，如下圖所示。2.yarn2.3常見的包管理工具為了提高下載yarn安裝包的速度，也可以將yarn的下載源切換成國內(nèi)鏡像服務(wù)器。為yarn設(shè)置鏡像地址的具體命令如下。yarnconfigsetregistry為了驗證鏡像地址是否設(shè)置成功，可以通過如下命令進行驗證。yarnconfiggetregistry執(zhí)行上述命令后，若輸出了設(shè)置的鏡像地址，則表示設(shè)置成功。2.3常見的包管理工具下面列舉yarn中一些常用的命令。yarninstall：可簡寫為yarn，用于為項目安裝所有包。如果提供了-g選項，則會把包安裝為全局包，否則只安裝到本項目中。yarnremove包名：用于卸載指定名稱的包。yarnup包名：用于更新指定名稱的包。yarnadd包名：用于添加指定名稱的包。2.3常見的包管理工具yarn與npm包管理工具的區(qū)別使用npm安裝同一個包時，每次安裝都需要重新下載，而yarn會緩存每個下載過的包，再次使用時無須重復(fù)下載。npm按照隊列安裝每個包，也就是說，必須要等到當(dāng)前包安裝完成后，才能繼續(xù)安裝后面的包，而yarn可以利用并行下載的方式提高資源利用率，安裝速度更快。npm的輸出信息比較冗長，在執(zhí)行npminstall命令時，命令提示符里會輸出所有被安裝的包的信息。相比之下，yarn的輸出信息比較簡潔，只輸出必要的信息，同時也提供了一些命令供開發(fā)者查詢額外的安裝信息。使用Vite創(chuàng)建Vue3項目33.1 什么是Vite什么是Vite？3.1 什么是ViteVite（讀音：/vit/）是一個輕量級、運行速度快的前端構(gòu)建工具，它支持模塊熱替換（HotModuleReplacement，HMR），可以即時、準(zhǔn)確地更新模塊，當(dāng)代碼修改時無須重新加載頁面或清除應(yīng)用程序狀態(tài)。Vite默認(rèn)安裝的插件比較少，隨著開發(fā)過程中依賴的增多，需要額外進行配置。3.1 什么是Vite在Vue3出現(xiàn)前，Vue2一般使用Vue

CLI創(chuàng)建。Vue

CLI基于Webpack構(gòu)建并配置項目，在項目啟動時，Webpack需要從入口文件索引整個項目的文件，編譯成一個或多個單獨的.js文件。雖然Webpack對代碼進行了拆分，但是仍可能一次生成所有路由下的編譯后的文件，導(dǎo)致服務(wù)啟動時間隨著項目的復(fù)雜度增加而呈指數(shù)式的增長。而Vite改進了這一點，在項目啟動時，Vite會對模塊代碼進行按需加載，啟動速度更快。因此，當(dāng)使用Vue3開發(fā)新項目時，推薦使用Vite進行創(chuàng)建。3.1 什么是ViteVite不需要以命令的方式安裝和卸載，只要安裝了npm或yarn，就可使用Vite的相關(guān)命令創(chuàng)建項目。Vite會作為項目的開發(fā)依賴保存在項目的node_modules目錄中。需要注意的是，Node.js必須為14.18及以上版本時才可以使用Vite，并且Vite中的部分模板可能需要更高的Node.js版本才能正常運行。另外，Node.js的14、16等更新版本不再支持Windows7操作系統(tǒng)，推薦使用Windows10等新版操作系統(tǒng)。3.2 創(chuàng)建Vue3項目掌握Vue3項目的創(chuàng)建方法，能夠使用Vite創(chuàng)建Vue3項目

先定一個小目標(biāo)！3.2 創(chuàng)建Vue3項目Vite提供了兩種創(chuàng)建項目的命令。手動創(chuàng)建項目的命令通過模板自動創(chuàng)建項目的命令3.2 創(chuàng)建Vue3項目使用npm或yarn包管理工具都可以搭配Vite手動創(chuàng)建項目，具體命令如下。#使用npmcreate命令創(chuàng)建項目npmcreatevite@latest#使用yarncreate命令創(chuàng)建項目yarncreatevite上述命令展示了兩種包管理工具用于創(chuàng)建Vite項目，在使用時任選其一即可。npmcreate和yarn

create命令后跟一個vite包名，表示初始化Vite。vite@latest表示在npm中安裝最新版本的Vite。1.手動創(chuàng)建項目的命令3.2 創(chuàng)建Vue3項目打開命令提示符，切換到D:\vue\chapter01目錄，執(zhí)行如下命令。yarncreatevite執(zhí)行上述命令后，Vite會提示填寫項目名稱，如下圖所示。STEP01步驟1步驟3步驟4步驟2手動創(chuàng)建Vue項目3.2 創(chuàng)建Vue3項目使用vite-project作為項目名稱后，Vite會提示選擇創(chuàng)建項目所使用的框架，如下圖所示。手動創(chuàng)建Vue項目步驟1步驟3步驟4步驟23.2 創(chuàng)建Vue3項目選擇好框架后，Vite會提示選擇一個變體，如下圖所示。STEP03手動創(chuàng)建Vue項目步驟3步驟4步驟2步驟13.2 創(chuàng)建Vue3項目選擇好變體后，Vite會提示項目創(chuàng)建完成，如下圖所示。手動創(chuàng)建Vue項目步驟3步驟4步驟2步驟13.2 創(chuàng)建Vue3項目項目創(chuàng)建完成后的提示命令，具體命令解釋如下。cdvite-project #切換到項目目錄yarn #安裝項目的全部依賴yarndev #啟動服務(wù)上述命令中，yarndev命令是Vue3項目中package.json文件里面scripts節(jié)點配置的命令。除了yarndev命令外，還有2個常用命令yarnbuild和yarn

preview，它們分別表示構(gòu)建生產(chǎn)環(huán)境項目和構(gòu)建本地預(yù)覽環(huán)境項目。這3個命令實際上都是別名，是為了便于開發(fā)人員記憶。當(dāng)執(zhí)行這3個命令時，yarn會讀取當(dāng)前項目的package.json文件中的命令配置，找到真正的命令并執(zhí)行。3.2 創(chuàng)建Vue3項目Vue3項目的package.json文件中的命令配置如下。"scripts":{"dev":"vite","build":"vitebuild","preview":"vitepreview"},上述配置中，dev是vite的別名，build是vite

build的別名，preview是vitepreview的別名。也就是說，當(dāng)執(zhí)行yarndev時，實際執(zhí)行的命令是yarnvite。別名可以自定義，如果修改了別名，在執(zhí)行命令時需要使用修改后的別名。3.2 創(chuàng)建Vue3項目項目啟動后，會默認(rèn)開啟一個本地服務(wù)，具體如下。VITEv4.1.4readyin441ms?Local::5173/3.2 創(chuàng)建Vue3項目在瀏覽器中打開:5173/，如下圖所示。3.2 創(chuàng)建Vue3項目通過模板自動創(chuàng)建項目的方式相對簡單，它通過附加的命令行選項直接指定項目名稱和模板，省去了填寫項目名稱、選擇框架和變體等環(huán)節(jié)。Vite提供了許多模板預(yù)設(shè)，可以創(chuàng)建Vite+React+TS、Vite+Vue、Vite+Svelte等類型的項目。通過附加的命令行選項直接指定項目名稱和模板的基本語法格式如下。#使用npm6或更低版本創(chuàng)建項目npmcreatevite@latest<項目名稱>--template<模板名稱>#使用npm7或更高版本創(chuàng)建項目npmcreatevite@latest<項目名稱>----template<模板名稱>#使用yarncreate命令創(chuàng)建項目yarncreatevite<項目名稱>--template<模板名稱>2.通過模板自動創(chuàng)建項目的命令3.2 創(chuàng)建Vue3項目打開命令提示符，切換到D:\vue\chapter01目錄，使用yarn創(chuàng)建一個基于Vite+Vue模板且項目名稱為hello-vite的項目。yarncreatevitehello-vite--templatevueSTEP013.2 創(chuàng)建Vue3項目執(zhí)行上述命令后，hello-vite項目創(chuàng)建完成的效果如下圖所示。3.2 創(chuàng)建Vue3項目在項目創(chuàng)建完成后，給出了一些提示命令，需要執(zhí)行這些命令才能完成項目啟動，具體命令如下。cdhello-vite #切換到項目目錄yarn #安裝項目的全部依賴yarndev #啟動服務(wù)項目啟動后，會默認(rèn)開啟一個本地服務(wù)，具體如下。VITEv4.1.4readyin441ms?Local::5173/在瀏覽器中打開:5173/，頁面效果與手動創(chuàng)建Vue3項目的頁面效果相同。3.3 Vue3項目的目錄結(jié)構(gòu)Vue3項目創(chuàng)建成功后，使用VSCode編輯器打開項目目錄，可以看到一個默認(rèn)生成的項目目錄結(jié)構(gòu)，如右圖所示。3.3 Vue3項目的目錄結(jié)構(gòu)下面簡要介紹Vue3項目的目錄結(jié)構(gòu)中各個目錄和文件的作用，具體如下。.vscode：存放VSCode編輯器的相關(guān)配置。node_modules：存放項目的各種依賴和安裝的插件。public：存放不可編譯的靜態(tài)資源文件，當(dāng)進行項目構(gòu)建時，該目錄下的文件會被復(fù)制到dist目錄，該目錄下的文件需要使用絕對路徑訪問。src：源代碼目錄，保存開發(fā)人員編寫的項目源代碼。src\assets：存放可編譯的靜態(tài)資源文件，例如圖片、樣式文件等。該目錄下的文件需要使用相對路徑訪問。3.3 Vue3項目的目錄結(jié)構(gòu)src\components：存放單文件組件，即.vue文件。src\components\HelloWorld.vue：一個名稱為HelloWorld的單文件組件。src\App.vue：項目的根組件。src\main.js：項目的入口文件，用于創(chuàng)建Vue應(yīng)用實例。src\style.css：項目的全局樣式表文件。.gitignore：向Git倉庫上傳代碼時需要忽略的文件列表。index.html：默認(rèn)的主渲染頁面文件，同時也是頁面的入口文件。3.3 Vue3項目的目錄結(jié)構(gòu)package.json：包配置文件。README.md：項目使用說明文件。vite.config.js：存放Vite的相關(guān)配置。yarn.lock：存儲每一個依賴項的安裝版本，在使用yarn安裝、升級、卸載依賴時，會自動更新yarn.lock文件。此外，當(dāng)執(zhí)行了yarnbuild命令后，在項目目錄中會出現(xiàn)dist目錄，該目錄中保存的是項目構(gòu)建后的文件。3.4 Vue3項目的運行過程使用Vite構(gòu)建Vue3項目后，當(dāng)執(zhí)行yarndev命令啟動服務(wù)時，項目就會運行起來，該項目會通過src\main.js文件將src\App.vue組件渲染到index.html文件的指定區(qū)域。3.4 Vue3項目的運行過程010203123Vue3項目是由各種組件組成的，src\App.vue文件是項目的根組件。在根組件中可以引用其他組件，從而顯示其他組件的內(nèi)容。src\App.vue文件index.html文件是頁面的入口文件，該文件中預(yù)留了用于被src\main.js文件中的Vue應(yīng)用實例所控制的區(qū)域。index.html文件src\main.js文件是項目的入口文件，該文件創(chuàng)建了Vue應(yīng)用實例。Vue應(yīng)用實例是Vue項目工作的基礎(chǔ)，每個Vue項目都是從創(chuàng)建Vue應(yīng)用實例開始的。src\main.js文件選項式API和組合式API44.1選項式API和組合式APIVue3支持選項式API和組合式API。其中，選項式API是從Vue2開始使用的一種寫法，而Vue3新增了組合式API的寫法。選項式API選項式API是一種通過包含多個選項的對象來描述組件邏輯的API，其常用的選項包括data、methods、computed、watch等。組合式API相比于選項式API，組合式API是將組件中的數(shù)據(jù)、方法、計算屬性、偵聽器等代碼全部組合在一起，寫在setup()函數(shù)中。4.1選項式API和組合式API<script>exportdefault{data(){return{//定義數(shù)據(jù)}},methods:{//定義方法},computed:{//定義計算屬性},watch:{//定義偵聽器}}</script>選項式API的語法格式如下。4.1選項式API和組合式API<script>import{computed,watch}from'vue'exportdefault{setup(){const數(shù)據(jù)名=數(shù)據(jù)值const方法名=()=>{}const計算屬性名=computed(()=>{})watch(偵聽器的來源,回調(diào)函數(shù),可選參數(shù))return{數(shù)據(jù)名,方法名,計算屬性名}}}</script>組合式API的語法格式如下。4.1選項式API和組合式API<scriptsetup>import{computed,watch}from'vue'//定義數(shù)據(jù)const數(shù)據(jù)名=數(shù)據(jù)值//定義方法const方法名=()=>{}//定義計算屬性const計算屬性名=computed(()=>{})//定義偵聽器watch(偵聽器的來源,回調(diào)函數(shù),可選參數(shù))</script>Vue還提供了setup語法糖，用于簡化組合式API的代碼。使用setup語法糖時，組合式API的語法格式如下。4.1選項式API和組合式API選項式API和組合式API的關(guān)系Vue提供的選項式API和組合式A