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

2.能運用Vue模板語法實現數據綁定與事件處理

3.能配置多環境Vue項目結構素質目標通過演示項目及相關文檔，理解并梳理項目的業務功能結構。激發學生對數據可視化技術的探索興趣養成模塊化開發習慣教學內容主要內容6.1.1Vue.js簡介、6.1.2Vue.js引入方式、6.1.3Vue頁面基本結構重點Vue單文件組件結構解析

2.數據驅動視圖原理難點模板語法中指令系統應用

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

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

-

package.json依賴管理解析

-

vue.config.js自定義配置

2.目錄作用演示：

-public與assets資源加載差異

-components組件注冊規范教師講解學生觀看演示并思考10分鐘六、綜合練習與總結?總結本節課知識點及重難點。總結知識點跟隨教師回顧5分鐘

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

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

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