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

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

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

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

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

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

-

package.json依賴管理解析

-

vue.config.js自定義配置

2.目錄作用演示：

-public與assets資源加載差異

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

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

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

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