PAGE10PAGE大數(shù)據(jù)可視化分析課程教案首頁(yè)12-2一、核心要素章節(jié)名稱項(xiàng)目6基于Vue的農(nóng)業(yè)數(shù)據(jù)管理中臺(tái)前端框架搭建任務(wù)6.1Vue.js前端框架概述教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第12周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握Vue.js框架三大核心特性（響應(yīng)式/組件化/模板語(yǔ)法）理解Vue單文件組件結(jié)構(gòu)（template/script/style）熟悉VueCLI腳手架功能特點(diǎn)能力目標(biāo)能獨(dú)立完成Vue項(xiàng)目的初始化搭建

2.能運(yùn)用Vue模板語(yǔ)法實(shí)現(xiàn)數(shù)據(jù)綁定與事件處理

3.能配置多環(huán)境Vue項(xiàng)目結(jié)構(gòu)素質(zhì)目標(biāo)通過(guò)演示項(xiàng)目及相關(guān)文檔，理解并梳理項(xiàng)目的業(yè)務(wù)功能結(jié)構(gòu)。激發(fā)學(xué)生對(duì)數(shù)據(jù)可視化技術(shù)的探索興趣養(yǎng)成模塊化開發(fā)習(xí)慣教學(xué)內(nèi)容主要內(nèi)容6.1.1Vue.js簡(jiǎn)介、6.1.2Vue.js引入方式、6.1.3Vue頁(yè)面基本結(jié)構(gòu)重點(diǎn)Vue單文件組件結(jié)構(gòu)解析

2.數(shù)據(jù)驅(qū)動(dòng)視圖原理難點(diǎn)模板語(yǔ)法中指令系統(tǒng)應(yīng)用

2.開發(fā)環(huán)境與生產(chǎn)環(huán)境的差異處理教法改革教學(xué)方法問(wèn)答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問(wèn)題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入?展示智慧農(nóng)業(yè)管理平臺(tái)，引出Vue.js的介紹教師演示，引導(dǎo)思考明確本節(jié)課的目標(biāo)效果5分鐘6.1.1Vue.js簡(jiǎn)介教師講解學(xué)生觀看演示并思考10分鐘6.1.2Vue.js引入方式教師講解學(xué)生觀看演示并思考15分鐘6.1.3Vue頁(yè)面基本結(jié)構(gòu)Vue頁(yè)面通常由模板、JavaScript腳本、樣式表等部分構(gòu)成。在HTML代碼中分別由<template>標(biāo)簽、<script>標(biāo)簽和<style>等標(biāo)簽組成。1．<template>標(biāo)簽<template>標(biāo)簽用于聲明內(nèi)容模板元素，定義View視圖。該標(biāo)簽允許聲明片段HTML代碼，該片段HTML代碼在加載頁(yè)面時(shí)不會(huì)呈現(xiàn)，但可以在運(yùn)行時(shí)使用JavaScript實(shí)例化，將其通過(guò)腳本復(fù)制并插入文檔?？梢允褂肰ue.js的模板語(yǔ)法，如插值表達(dá)式（{{variable}}）、指令（如v-for,v-if）、組件（自定義或內(nèi)置）等構(gòu)建用戶界面。2．<script>標(biāo)簽<script>標(biāo)簽用于創(chuàng)建Vue實(shí)例。Vue是一個(gè)全局的類，使用時(shí)必須先實(shí)例化，才能通過(guò)它連接View（視圖）和Model（模型）。每個(gè)Vue應(yīng)用都是從通過(guò)Vue構(gòu)造函數(shù)創(chuàng)建一個(gè)Vue根實(shí)例開始的，包括數(shù)據(jù)、方法、生命周期鉤子、計(jì)算屬性、偵聽器等。3．<style>標(biāo)簽<style>標(biāo)簽用于為Vue.js中需要渲染的DOM對(duì)象動(dòng)態(tài)添加樣式效果。當(dāng)然也可以使用外部樣式文件，通過(guò)<link>標(biāo)簽和<style>標(biāo)簽鏈接或?qū)胪獠繕邮奖?。演示編寫?guī)則，講解學(xué)生觀看演示并思考15分鐘打開一個(gè)Vue空項(xiàng)目新建項(xiàng)目?打開HBuilderX→頂部菜單→文件→新建→項(xiàng)目/hbuilder-new-project.png選擇模板?選擇“普通項(xiàng)目”?→?Vue3項(xiàng)目設(shè)置項(xiàng)目名稱和存儲(chǔ)路徑（路徑不要有中文或空格）/hbuilder-vue-template.png等待初始化?HBuilderX會(huì)自動(dòng)生成項(xiàng)目結(jié)構(gòu)并安裝依賴（需聯(lián)網(wǎng)）。打開項(xiàng)目打開項(xiàng)目，在命令提示符中輸入npmrundev教師講解示范學(xué)生觀看演示并嘗試操作10分鐘代碼實(shí)踐引導(dǎo)學(xué)生嘗試打開項(xiàng)目，并實(shí)現(xiàn)HelloWorld的輸出教師巡回指導(dǎo)學(xué)生實(shí)操10分鐘項(xiàng)目結(jié)構(gòu)解析1.關(guān)鍵文件講解：

-

package.json依賴管理解析

-

vue.config.js自定義配置

2.目錄作用演示：

-public與assets資源加載差異

-components組件注冊(cè)規(guī)范教師講解學(xué)生觀看演示并思考10分鐘六、綜合練習(xí)與總結(jié)?總結(jié)本節(jié)課知識(shí)點(diǎn)及重難點(diǎn)?？偨Y(jié)知識(shí)點(diǎn)跟隨教師回顧5分鐘

大數(shù)據(jù)可視化分析課程教案首頁(yè)12-2一、核心要素章節(jié)名稱項(xiàng)目6基于Vue的農(nóng)業(yè)數(shù)據(jù)管理中臺(tái)前端框架任務(wù)6.2Vue項(xiàng)目開發(fā)環(huán)境與輔助工具教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第12周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握常用npm包管理器命令。熟悉Vue項(xiàng)目標(biāo)準(zhǔn)目錄結(jié)構(gòu)能力目標(biāo)1.能獨(dú)立完成Node.js多環(huán)境配置

2.能使用VueCLI創(chuàng)建工程化項(xiàng)目素質(zhì)目標(biāo)1.培養(yǎng)技術(shù)文檔解讀能力2.提升開發(fā)環(huán)境問(wèn)題排查意識(shí)3.建立團(tuán)隊(duì)協(xié)作開發(fā)規(guī)范教學(xué)內(nèi)容主要內(nèi)容6.2.1Node.js部署、6.2.2Node包管理器npm、6.2.3Node.js環(huán)境配置、6.2.4項(xiàng)目目錄介紹任務(wù)實(shí)施配置Vue所需環(huán)境、項(xiàng)目目錄重點(diǎn)Vue.js頁(yè)面的基本組成。難點(diǎn)常用npm包管理器命令。教法改革教學(xué)方法問(wèn)答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問(wèn)題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思學(xué)生下載node.js新版本時(shí)，步驟有所不同，需要教師進(jìn)一步講解。安裝環(huán)境時(shí)，安裝完Vue之后需要重啟命令提示符才能查看是否安裝成功。清除緩存命令npmcacheclean--force；2.使用nvm管理多版本Node.js

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配導(dǎo)入課堂展示本項(xiàng)目的效果，并引出需要的環(huán)境引導(dǎo)分享學(xué)生互動(dòng)討論5分鐘6.2.1Node.js部署安裝Node.js（1）從Node.js官網(wǎng)導(dǎo)航至下載頁(yè)面，根據(jù)需要下載“Windows安裝包(.msi)”版，本書選用node-v16.14.2-x64.msi。（2）雙擊安裝包，如圖6-2所示，根據(jù)提示安裝軟件。在安裝Node.js的同時(shí)，完成了npm工具的安裝。（3）打開命令提示符，如圖6-3所示，輸入相關(guān)命令查看軟件版本信息。如果出現(xiàn)版本信息提示，則說(shuō)明Node.js環(huán)境安裝成功。輸入node-v命令查詢Node.js版本號(hào)。輸入npm-v命令查詢npm版本號(hào)。圖6-2根據(jù)提示安裝軟件圖6-3使用命令提示符查看Node.js與npm的版本號(hào)教師講解及演示學(xué)生觀看演示并思考10分鐘6.2.2Node包管理器Npm管理（1）查看Node.js版本。node-v（2）查看npm版本。npm-v（3）查看npm的本地倉(cāng)庫(kù)。npmlist-global（4）安裝vue。npminstallvue-g（5）安裝vue-cli。npminstallvue-cli-g教師講解學(xué)生觀看演示并思考10分鐘6.2.3Node.js環(huán)境配置Node.js環(huán)境配置為了防止出現(xiàn)Node.js后續(xù)安裝工具、依賴，從而導(dǎo)致默認(rèn)C盤下的倉(cāng)庫(kù)資源緊張的問(wèn)題，可以通過(guò)以下步驟配置環(huán)境，添加新的倉(cāng)庫(kù)。(1)查看當(dāng)前倉(cāng)庫(kù)位置（默認(rèn)位置）npmlist-global(2)新建存放全局模塊和緩存的文件夾在所需位置（如D:\DEV\nodejs_path）新建文件夾“node_cache”和“node_global”，如圖6-4所示。圖6-4新建存放全局模塊和緩存的文件夾(3)執(zhí)行npm相關(guān)配置在命令行中執(zhí)行npm相關(guān)配置命令如圖6-5所示。npmconfigsetprefix"D:\DEV\nodejs_path\node_global"npmconfigsetcache"D:\DEV\nodejs_path\node_cache"圖6-5在命令行中npm相關(guān)配置命令(4)設(shè)置環(huán)境變量1）打開環(huán)境變量。如圖6-6所示，右擊“計(jì)算機(jī)”圖標(biāo)，在彈出的快捷菜單中選擇“屬性”→“高級(jí)系統(tǒng)設(shè)置”命令，打開“系統(tǒng)屬性”對(duì)話框，選擇“高級(jí)”選項(xiàng)，單擊“環(huán)境變量”按鈕，打開“環(huán)境變量”對(duì)話框。圖6-6打開“環(huán)境變量”對(duì)話框2）新建環(huán)境變量。在已建的“node_global”文件夾中新建“node_modules”文件夾，單擊環(huán)境變量窗口中“系統(tǒng)變量”的“新建”按鈕，新建變量名為NODE_PATH的環(huán)境變量，變量值為D:\DEV\nodejs_path\node_global\node_modules（即nodemodules文件夾所在目錄地址），如圖6-7所示。3）雙擊Path變量，打開“編輯環(huán)境變量窗口”對(duì)話框，添加prefix倉(cāng)庫(kù)地址，這里所用的配置地址為：D:\DEV\nodejs_path\node_global，如圖6-8所示。圖6-7新建NODE_PATH環(huán)境變量圖6-8編輯Path環(huán)境變量教師講解學(xué)生觀看演示并思考15分鐘6.2.4項(xiàng)目目錄介紹1．nodemodules文件夾node項(xiàng)目往往會(huì)使用多個(gè)第三方包，通過(guò)npminstall命令可以自定義安裝第三方包，同項(xiàng)目的目錄結(jié)構(gòu)時(shí)，所有在package.json文件中定義的第三方包會(huì)被自動(dòng)下載，保存在node_modules文件夾下，如圖6-9所示。因此，node_modules文件夾中的內(nèi)容有很多，在復(fù)制后可以通過(guò)npminstall命令再次自動(dòng)導(dǎo)入第三方包。圖6-9項(xiàng)目的目錄結(jié)構(gòu)2．src文件夾如圖6-10所示，src文件夾用于存放核心代碼和工作空間，其中，assets文件夾用于存放圖片、音頻、視頻等資源；components文件夾用于存放視圖和組件，是開發(fā)的核心；router文件夾中的index.js文件用于配置項(xiàng)目前端路由，定義頁(yè)面對(duì)應(yīng)的URL（UniformResourc