Vue.js3.0從入門到實(shí)踐教學(xué)設(shè)計(jì)課程名稱：Vue.js3.0從入門到實(shí)踐授課年級(jí)：授課學(xué)期：教師姓名：年月日課程名稱第2章 Vue.js環(huán)境搭建與項(xiàng)目創(chuàng)建計(jì)劃學(xué)時(shí)3內(nèi)容分析在開發(fā)Vue前端頁面之前，需要搭建好開發(fā)和測試環(huán)境，良好的開發(fā)環(huán)境對(duì)于穩(wěn)定開發(fā)者以及提高生產(chǎn)效率都有著不可忽視的作用。在創(chuàng)建Vue項(xiàng)目之前，需要先搭建良好的Vue.js開發(fā)環(huán)境，包括安裝Vue.js，理解Vue.js多種安裝方式的不同之處，選擇并安裝合適的開發(fā)工具，進(jìn)而提高開發(fā)效率，安裝為調(diào)試項(xiàng)目服務(wù)的調(diào)試工具vue-devtools等，使開發(fā)者在完成環(huán)境搭建的基礎(chǔ)上掌握Vue項(xiàng)目創(chuàng)建的方法，帶領(lǐng)讀者開啟Vue前端開發(fā)之旅。教學(xué)目標(biāo)與教學(xué)要求【知識(shí)目標(biāo)】了解Vue.js的多種安裝方法掌握Vue.js開發(fā)工具的安裝熟悉Vue.js調(diào)試工具的安裝掌握Vue.js項(xiàng)目創(chuàng)建的技巧【技能目標(biāo)】能夠正確安裝Vue.js開發(fā)工具能夠正確安裝Vue.js調(diào)試工具能夠創(chuàng)建Vue.js項(xiàng)目【育人目標(biāo)】鼓勵(lì)學(xué)生動(dòng)手實(shí)踐，培養(yǎng)學(xué)生的創(chuàng)新思維，促進(jìn)學(xué)生的個(gè)性發(fā)展。培養(yǎng)學(xué)生網(wǎng)絡(luò)的倫理道德和法律法規(guī)，促進(jìn)學(xué)生養(yǎng)成良好的習(xí)慣。教學(xué)重點(diǎn)安裝Vue.js安裝VSCode安裝vue-devtools實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序教學(xué)難點(diǎn)實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序教學(xué)方式課堂講解配合PPT演示教學(xué)過程第一課時(shí)（安裝Vue.js、Web前端開發(fā)工具）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的安裝Vue.js、Web前端開發(fā)工具等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握Vue.js的安裝方式理解Web前端開發(fā)工具VisualStudioCode知識(shí)講解知識(shí)點(diǎn)1-安裝Vue.jsVue.js的常用安裝方式主要有4種，包括CDN方式、NPM方式、VueCLI方式、Vite方式。CDN方式安裝Vue.jsCDN方式安裝Vue.js的語法格式開發(fā)者可借助script標(biāo)簽實(shí)現(xiàn)CDN方式安裝Vue.js，語法格式如下所示。<scriptsrc="/vue@next"></script>CDN方式安裝Vue.js的優(yōu)缺點(diǎn)優(yōu)點(diǎn)：不需要下載和安裝Vue.js，可以直接使用CDN文件，減少了本地文件占用和維護(hù)的成本。缺點(diǎn)：依賴于CDN服務(wù)商，可能會(huì)出現(xiàn)CDN服務(wù)不穩(wěn)定或者CDN文件更新不及時(shí)的情況。NPM方式安裝Vue.jsNPM方式安裝Vue.js的命令代碼NPM方式安裝Vue.js的命令代碼如下所示。#安裝最新穩(wěn)定版$npminstallvue@next安裝CNPM的命令代碼如下所示。npminstall-gcnpm--registry=完成CNPM安裝后，開發(fā)者可使用cnpm命令安裝項(xiàng)目所需模塊，具體命令代碼如下所示。cnpminstall模塊名稱NPM方式安裝Vue.js的優(yōu)缺點(diǎn)優(yōu)點(diǎn)：可以自由選擇Vue的版本和更新方式；可以使用Vue的腳手架工具VueCLI，方便快捷地創(chuàng)建和管理Vue項(xiàng)目；可以和其他NPM包管理器配合使用。缺點(diǎn)：需要下載和安裝Node.js和NPM環(huán)境，增加了本地文件占用和維護(hù)成本。安裝速度可能會(huì)受到網(wǎng)絡(luò)環(huán)境的影響。VueCLI安裝Vue提供了一個(gè)官方的腳手架VueCLI，它可以快速搭建一個(gè)應(yīng)用，它為現(xiàn)代前端提供了batteries-included的構(gòu)建設(shè)置。若讀者是初學(xué)者，建議讀者先熟悉Vue本身之后再使用VueCLI。本書將在第9章將詳細(xì)介紹腳手架的安裝及使用。Vite安裝Vite是Vue的作者開發(fā)的一個(gè)面向現(xiàn)代瀏覽器的，更加輕量、快捷的前端構(gòu)建工具，Vite可為前端工作者提供良好的開發(fā)體驗(yàn)。本書將在第9章詳細(xì)介紹Vite的安裝與使用。知識(shí)點(diǎn)2-Web前端開發(fā)工具目前市場上主流的Web前端開發(fā)工具有WebStorm、VisualStudioCode、SublimeText、HBuilderX、Dreamweaver等，本書選用的開發(fā)工具是VisualStudioCode。VisualStudioCode（簡稱VSCode）是微軟開發(fā)的一個(gè)輕量級(jí)代碼編輯器，支持常見的語法提示、代碼高亮、Git等功能，具有開源、免費(fèi)、跨平臺(tái)、插件擴(kuò)展豐富、運(yùn)行速度快、占用內(nèi)存少，開發(fā)效率高等特點(diǎn)，網(wǎng)頁開發(fā)中經(jīng)常會(huì)使用到該軟件，非常靈活方便。讀者可進(jìn)入VSCode官方頁面，下載VSCode的安裝包進(jìn)行安裝，官方頁面如下圖所示。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第二課時(shí)（安裝VSCode、安裝vue-devtools、實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序）回顧內(nèi)容回顧上節(jié)內(nèi)容，引出本節(jié)內(nèi)容回顧上節(jié)的內(nèi)容，并提問學(xué)生上節(jié)練習(xí)中的問題，學(xué)生回答完后，由上節(jié)內(nèi)容引出本節(jié)要講的安裝VSCode、安裝vue-devtools、實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序等內(nèi)容。明確學(xué)習(xí)目標(biāo)掌握VSCode的安裝方式掌握vue-devtools的安裝方式掌握創(chuàng)建第一個(gè)Vue.js程序的方式知識(shí)講解知識(shí)點(diǎn)1-安裝VSCode本節(jié)將對(duì)VSCode的安裝和VSCode插件的安裝進(jìn)行介紹。VSCode的安裝首先打開VSCode的官方網(wǎng)站，選擇Windows選項(xiàng)中的UserInstaller下載VSCode。下載完成后的文件名為VSCodeUserSetup-x64-1.67.0.exe，運(yùn)行該文件進(jìn)入VSCode的安裝界面，根據(jù)向?qū)Ы缑娴奶崾荆B續(xù)單擊“下一步”按鈕即可完成VSCode的安裝。VSCode插件的安裝接下來將詳細(xì)介紹Vue開發(fā)中常用的4個(gè)插件。Chinese中文Vetur代碼高亮ESLint代碼檢測校驗(yàn)CodeRunner快捷運(yùn)行知識(shí)點(diǎn)2-安裝vue-devtoolsvue-devtools是一款基于GoogleChrome瀏覽器、用于調(diào)試Vue應(yīng)用的瀏覽器擴(kuò)展。接下來介紹vue-devtools的安裝步驟。下載壓縮包解壓安裝包下載第三方依賴執(zhí)行npminstall-gyarn命令安裝yarn。執(zhí)行yarninstall命令下載第三方依賴。vue-devtools源碼編譯完成后，可查看devtools-main文件夾的目錄結(jié)構(gòu)。Google瀏覽器的開發(fā)者模式打開Google瀏覽器，選擇擴(kuò)展程序選項(xiàng)。進(jìn)入擴(kuò)展程序管理頁面，單擊開發(fā)者模式右側(cè)的單選按鈕開啟開發(fā)者模式。安裝vue-devtools開啟Google瀏覽器的開發(fā)者模式后，單擊“加載已解壓的擴(kuò)展程序”按鈕并選擇devtools-main文件夾下的packages\shell-chrome文件夾，即可安裝vue-devtools擴(kuò)展。知識(shí)點(diǎn)3-實(shí)訓(xùn)：創(chuàng)建第一個(gè)Vue.js程序本節(jié)將以八大菜系為主題，構(gòu)建一個(gè)“菜系介紹”頁面。菜系介紹頁面結(jié)構(gòu)簡圖菜系介紹頁面的結(jié)構(gòu)簡圖如下圖所示。實(shí)現(xiàn)菜系介紹頁面效果使用Vue創(chuàng)建程序非常簡單，具體步驟如下所示。第1步，安裝Vue.js庫并使用Vue.createApp()方法創(chuàng)建一個(gè)應(yīng)用程序?qū)嵗５?步，在data()函數(shù)中定義頁面中需要渲染的數(shù)據(jù)，將data()中的數(shù)據(jù)通過{{}}插值語法展示在頁面中。第3步，調(diào)用mount()方法在指定的DOM元素上掛載應(yīng)用程序?qū)嵗母M件，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，具體代碼可參考教學(xué)PPT或教材。讀者可使用瀏覽器控制臺(tái)或vue-devtools調(diào)試工具來驗(yàn)證其數(shù)據(jù)的響應(yīng)性。Console選項(xiàng)在瀏覽器中運(yùn)行上述代碼，按下F12鍵打開控制臺(tái)，切換至Console選項(xiàng)，并輸入vm.detail="豆腐為補(bǔ)益、清熱養(yǎng)生食品"，按下Enter鍵，可以發(fā)現(xiàn)頁面中的詳情介紹內(nèi)容同步發(fā)生了變化，顯示效果如下圖所示。Vue選項(xiàng)使用vue-devtools進(jìn)行調(diào)試，按下F12鍵打開控制臺(tái)，切換至Vue選項(xiàng)，并修改detail="此菜夏天食用能生津止渴"，單擊“保存”按鈕，可以發(fā)現(xiàn)頁面中的內(nèi)容同步發(fā)生了變化，顯示效果如下圖所示。知識(shí)鞏固與作業(yè)（1）回顧上課前的學(xué)習(xí)目標(biāo)，對(duì)本節(jié)課知識(shí)點(diǎn)進(jìn)行總結(jié)。（2）老師布置相關(guān)作業(yè)進(jìn)行練習(xí)。第三課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對(duì)本章中需要重點(diǎn)掌握的知識(shí)點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容