Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架） 課件 任務(wù)1　項(xiàng)目開發(fā)準(zhǔn)備

任務(wù)1項(xiàng)目開發(fā)準(zhǔn)備Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架）

目錄CONTENTS011.5任務(wù)實(shí)施1.7學(xué)習(xí)自評(píng)Part11.1任務(wù)描述1.2任務(wù)效果1.4知識(shí)儲(chǔ)備1.8課后練習(xí)1.9任務(wù)拓展1.3學(xué)習(xí)目標(biāo)1.6任務(wù)測(cè)試

本任務(wù)將完成“啟嘉校園”項(xiàng)目開始前的開發(fā)準(zhǔn)備工作，主要包括了解開發(fā)中使用的項(xiàng)目資源和項(xiàng)目資源使用方法，部署前、后端開發(fā)環(huán)境，以及創(chuàng)建項(xiàng)目開發(fā)目錄。

1.1任務(wù)描述

1.2任務(wù)效果任務(wù)效果圖

1.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過(guò)搭建項(xiàng)目開發(fā)環(huán)境，增強(qiáng)學(xué)習(xí)者的系統(tǒng)思維能力，培養(yǎng)學(xué)習(xí)者養(yǎng)成統(tǒng)籌全局的習(xí)慣。通過(guò)學(xué)習(xí)MasterGo的使用，增強(qiáng)學(xué)習(xí)者合理使用工具和技術(shù)的能力，養(yǎng)成優(yōu)化方法，提高工作效率的習(xí)慣。

了解產(chǎn)品需求文檔的作用。了解頁(yè)面設(shè)計(jì)圖的作用。了解字體圖標(biāo)的作用。了解接口文檔的作用。掌握搭建前端開發(fā)環(huán)境的方法。掌握搭建后端開發(fā)環(huán)境的方法。能夠使用MasterGo查看項(xiàng)目設(shè)計(jì)圖。能夠在Windows操作系統(tǒng)中安裝HBuilderX。能夠在Windows操作系統(tǒng)中安裝微信開發(fā)者工具。能夠使用HBuilderX創(chuàng)建uni-app項(xiàng)目。能夠使用HBuilderX運(yùn)行項(xiàng)目預(yù)覽效果。

1.4知識(shí)儲(chǔ)備1.4.1產(chǎn)品需求文檔

“啟嘉校園”產(chǎn)品需求文檔為在線文檔。在線文檔地址：

https://book.change.tm/u/a1。

1.4知識(shí)儲(chǔ)備1.4.2頁(yè)面設(shè)計(jì)圖

“啟嘉校園”設(shè)計(jì)圖地址：https://book.change.tm/u/a2。樣式標(biāo)注元素間距

1.4知識(shí)儲(chǔ)備1.4.2頁(yè)面設(shè)計(jì)圖

“啟嘉校園”設(shè)計(jì)圖地址：https://book.change.tm/u/a2。導(dǎo)出設(shè)計(jì)圖

1.4知識(shí)儲(chǔ)備1.4.3字體圖標(biāo)2定義使用iconfont的樣式3挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面拷貝項(xiàng)目面生成的font-face1unicode引用

1.4知識(shí)儲(chǔ)備1.4.3字體圖標(biāo)2挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面拷貝項(xiàng)目下面生成的fontclass代碼1font-class引用

1.4知識(shí)儲(chǔ)備1.4.4接口文檔

接口文檔即應(yīng)用程序接口的說(shuō)明文檔，又稱為API文檔，

用來(lái)描述系統(tǒng)所提供接口信息的文檔?！皢⒓涡@”接口文檔地址：https://book.change.tm/u/a5。

1.4知識(shí)儲(chǔ)備1.4.5項(xiàng)目源碼

讀者若需要完整代碼可以從啟嘉書盤中下載“啟嘉校園”項(xiàng)目源碼?！皢⒓涡@”項(xiàng)目源碼下載地址：https://book.change.tm/u/a6。

1.5任務(wù)實(shí)施1.5.1搭建前端開發(fā)環(huán)境下載安裝包打開官方下載地址https://www.dcloud.io/hbuilderx.html，點(diǎn)擊“DownloadforWindows”進(jìn)行下載解壓安裝包創(chuàng)建快捷方式打開HBuilderX將下載的HBuilderX壓縮包解壓到系統(tǒng)本地磁盤中，注意存放路徑不能包含中文。在解壓后的文件夾中找到HBuilderX.exe，右鍵創(chuàng)建桌面快捷方式，方便后期快速打開開發(fā)工具HBuilderX安裝完成，雙擊桌面HBuilderX快捷方式。安裝HBuilderX

1.5任務(wù)實(shí)施1.5.1搭建前端開發(fā)環(huán)境下載安裝包打開官方下載地址/miniprogram/dev/devtools/stable.html根據(jù)系統(tǒng)配置下載相應(yīng)安裝包安裝開發(fā)者工具雙擊下載的exe安裝包，根據(jù)提示進(jìn)行安裝即可安裝微信開發(fā)者工具

1.5任務(wù)實(shí)施1.5.2搭建后端開發(fā)環(huán)境使用瀏覽器打開下載頁(yè)面并下載exe安裝包，下載地址為：/p/change_other/d/change-campus/git/tree/template。1.下載安裝包檢查系統(tǒng)3306端口是否被占用注意Java程序和MySQL數(shù)據(jù)庫(kù)安裝路徑安裝過(guò)程會(huì)自動(dòng)修改系統(tǒng)環(huán)境變量2.檢查安裝環(huán)境雙擊下載的exe安裝包，將自動(dòng)進(jìn)行安裝，安裝成功后會(huì)提示“安裝成功”3.安裝后端開發(fā)環(huán)境點(diǎn)擊此處添加標(biāo)題點(diǎn)擊此處添加標(biāo)題點(diǎn)擊此處添加標(biāo)題哎呀小小草PPT模板請(qǐng)勿盜版點(diǎn)擊此處添加標(biāo)題點(diǎn)擊此處添加標(biāo)題點(diǎn)擊此處添加標(biāo)題點(diǎn)擊此處添加標(biāo)題哎呀小小草PPT模板請(qǐng)勿盜版點(diǎn)擊此處添加標(biāo)題

1.5任務(wù)實(shí)施1.5.3創(chuàng)建項(xiàng)目開發(fā)目錄設(shè)置項(xiàng)目名稱及路徑

1.5任務(wù)實(shí)施1.5.3創(chuàng)建項(xiàng)目開發(fā)目錄項(xiàng)目默認(rèn)目錄結(jié)構(gòu)

1.5任務(wù)實(shí)施1.5.3創(chuàng)建項(xiàng)目開發(fā)目錄

通過(guò)HBuilderX的“運(yùn)行到小程序模擬器”功能可以運(yùn)行項(xiàng)目預(yù)覽效果.

（1）在HBuilderX中配置開發(fā)者工具的安裝路徑：【運(yùn)行】->【運(yùn)行到

小程序模擬器】->【運(yùn)行設(shè)置】，點(diǎn)擊“瀏覽”，選擇微信開發(fā)者工具安裝路徑。

（2）開啟微信開發(fā)者工具的服務(wù)端口選項(xiàng)：【設(shè)置】->【安全設(shè)置】，開啟“服務(wù)端口”。

（3）點(diǎn)擊HBuilderX頂部菜單中【運(yùn)行】->【運(yùn)行到小程序模擬器】->【微信開發(fā)者工具】調(diào)起微信開發(fā)者工具預(yù)覽項(xiàng)目效果

1.6任務(wù)測(cè)試測(cè)試條目是否通過(guò)在電腦中成功運(yùn)行HBuilderX開發(fā)工具

在電腦中成功運(yùn)行微信開發(fā)者工具

在電腦中部署后端開發(fā)環(huán)境，啟動(dòng)Java、MySQL相關(guān)服務(wù)

使用HBuilderX成功創(chuàng)建“啟嘉校園”項(xiàng)目開發(fā)目錄

1.7自學(xué)評(píng)價(jià)評(píng)價(jià)內(nèi)容是否了解/掌握是否了解產(chǎn)品需求文檔的作用

是否了解頁(yè)面設(shè)計(jì)圖的作用

是否了解字體圖標(biāo)的作用

是否了解接口文檔的作用

是否掌握前端開發(fā)環(huán)境搭建

是否掌握后端開發(fā)環(huán)境搭建

是否了解創(chuàng)建項(xiàng)目流程

是否了解項(xiàng)目目錄結(jié)構(gòu)

1.8課后練習(xí)？1.選擇題（1）下列哪個(gè)選項(xiàng)不是uni-app的特點(diǎn)？A.使用Vue.js開發(fā)，一次開發(fā)多端發(fā)布B.豐富的API接口，可實(shí)現(xiàn)復(fù)雜功能C.只能發(fā)布到微信小程序、支付寶小程序等平臺(tái)D.支持在HBuilderX中直接創(chuàng)建uni-app項(xiàng)目（2）下列哪個(gè)文件或文件夾是uni-app項(xiàng)目中不存在的？A.app.vueB.main.jsC.pages.jsonD.uni.js（3）下列哪個(gè)選項(xiàng)不是HBuilderX的特點(diǎn)？A.支持微信小程序開發(fā)B.具備代碼提示和自動(dòng)補(bǔ)全功能C.可以直接在編輯器中預(yù)覽代碼效果D.只能用于開發(fā)移動(dòng)端應(yīng)用2.填空題（1）uni-app項(xiàng)目中的頁(yè)面文件通常存放在_____的文件夾中。（2）uni-app項(xiàng)目中的樣式文件通常存放在______的文件夾中。3.簡(jiǎn)答題（1）簡(jiǎn)述uni-app項(xiàng)目的主要目錄結(jié)構(gòu)及作用。

1.9任務(wù)拓展任務(wù)拓展

除了本任務(wù)講解的項(xiàng)目開發(fā)準(zhǔn)備外，在實(shí)際工作中為了確保項(xiàng)目順利進(jìn)行，還需要的準(zhǔn)備工