《Vue.js 前端開發(fā)技術(shù)與實(shí)踐》課件-第12章 基于Vue+Vant移動(dòng)端的項(xiàng)目發(fā)開實(shí)踐

第12章基于Vue+Vant移動(dòng)端的項(xiàng)目發(fā)開實(shí)踐

本章應(yīng)用Vue開發(fā)項(xiàng)目實(shí)踐，結(jié)合Vant開發(fā)移動(dòng)端應(yīng)用。12.1項(xiàng)目介紹生活服務(wù)老黃歷今日油價(jià)笑話汽車品牌大全“聚合數(shù)據(jù)/”提供的免費(fèi)API（1）老黃歷查詢（2）今日國(guó)內(nèi)油價(jià)查詢（3）車輛品牌車型大全（4）笑話大全12.2技術(shù)方案（1）前端技術(shù)方案①使用Vue作為前端開發(fā)框架。②使用VueCli腳手架搭建項(xiàng)目。③使用Vant提供的移動(dòng)端組件庫。④使用postcss-pxtorem、lib-flexible實(shí)現(xiàn)移動(dòng)端的自適配。⑤使用axios作為HTTP庫和后端API交互。⑥使用VueRouter實(shí)現(xiàn)前端路由。（2）后端技術(shù)方案后端使用“聚合數(shù)據(jù)/”提供的免費(fèi)API進(jìn)行數(shù)據(jù)交互，數(shù)據(jù)通過axios請(qǐng)求API服務(wù)器獲得數(shù)據(jù)。12.3創(chuàng)建項(xiàng)目及搭建Vant移動(dòng)端的開發(fā)環(huán)境（1）安裝VueCli（2）創(chuàng)建項(xiàng)目創(chuàng)vue

create

mweb回車創(chuàng)建項(xiàng)目（3）在mweb項(xiàng)目中安裝Vantnpm

i

vant

-S（4）引入Vant組件（5）配置移動(dòng)端的自適配--rem適配12.4配置axios（1）在項(xiàng)目中安裝引入axiosnpminstallaxios–save在main.js文件中引入axios，代碼如下：（2）在vue.config.js配置跨域代理12.5項(xiàng)目的目錄及文件結(jié)構(gòu)在views文件夾下的：lhl.vue（老黃歷查詢）yj.vue（今日國(guó)內(nèi)油價(jià)查詢）cpp.vue（車輛品牌車型大全）xh.vue（笑話大全）12.6配置路由名稱路由組件老黃歷查詢/lhllhl.vue今日國(guó)內(nèi)油價(jià)查詢/yjyj.vue車輛品牌車型大全/cppcpp.vue笑話大全/xhxh.vue12.7各模塊功能的實(shí)現(xiàn)12.7.1老黃歷查詢功能的實(shí)現(xiàn)（1）界面設(shè)計(jì)與實(shí)現(xiàn)（2）定義數(shù)據(jù)（3）實(shí)現(xiàn)界面初始顯示當(dāng)日的老黃歷信息（4）老黃歷查詢功能的實(shí)現(xiàn)12.7.2今日國(guó)內(nèi)油價(jià)查詢功能的實(shí)現(xiàn)（1）界面設(shè)計(jì)與實(shí)現(xiàn)（2）定義數(shù)據(jù)（3）實(shí)現(xiàn)界面初始顯示的數(shù)據(jù)（4）油價(jià)查詢功能的實(shí)現(xiàn)12.7.3車輛品牌車型查看功能的實(shí)現(xiàn)（1）界面設(shè)計(jì)與實(shí)現(xiàn)（2）定義數(shù)據(jù)（3）獲取車輛品牌大全數(shù)據(jù)12.7.4笑話查閱功能的實(shí)現(xiàn)（1）界面設(shè)計(jì)與實(shí)現(xiàn)（2）定義數(shù)據(jù)（3）初始化數(shù)據(jù)（4）實(shí)現(xiàn)翻閱

12.7.6配置Ap