源代碼：https://gitee.com/shentuzhigang/mini-project/tree/master/vue-eapp

實驗?zāi)繕?biāo)

掌握使用Vue-CLI腳手架工具在自己的電腦上建立項目，并會運行調(diào)試工具。

了解前端框架mint-ui的開發(fā)方法，掌握基本編程方法。

掌握手機網(wǎng)上商城網(wǎng)頁布局、圖片輪播等編程方法。

設(shè)計友好的操作界面，培養(yǎng)服務(wù)意識。

實驗內(nèi)容

第一步：下載案例代碼eapp-master.rar，使用VScode打開打開代碼，查看代碼中的README.md文件，安裝依賴包，使用npm run dev運行源代碼，了解界面布局設(shè)計、mint-ui的編程方法。
第二步：下載案例代碼vue-shop-app.rar，了解界面布局設(shè)計和圖片輪播編程方法。
第三步：使用vue-cli新建項目，使用vue.js,mint-ui等技術(shù)來創(chuàng)建一個模仿餓了么的APP。只要求完成手機前端部分功能，不少于2個頁面（主頁、熱門推薦、特色菜等），建議使用vue.js、mint-ui等技術(shù)。

---

截圖展示

主要代碼及實現(xiàn)方法簡介

<div><div class="goods"><div class="menu-wrapper" ref="menu"><ul><liclass="menu-item"v-for="(item,index) in goods":key="index":class="{active:currentIndex===index}"@click="scrollTo(index)"><span class="text border-1px"><span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}</span></li></ul></div><div class="foods-wrapper" ref="foods"><ul><li v-for="item in goods" :key='item' class="food-list food-list-hook"><h1 class="title">{{item.name}}</h1><ul><li v-for="food in item.foods" :key='food' @click="selectFood(food)" class="food-item border-1px"><div class="icon"><img width="57" height="57" :src="food.icon"></div><div class="content"><h2 class="name">{{food.name}}</h2><p class="description">{{food.description}}</p><div class="extra"><span class="count">月售{{food.sellCount}}份</span><span class="">好評率{{food.rating}}%</span></div><div class="price">￥<span class="now">{{food.price}}</span><span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span></div><div class="cartcontrol-wrapper"><cartcontrol :food="food" @update:increase="food.count == undefined ? food.count = 1:food.count++"@update:decrease="food.count--"></cartcontrol></div></div></li></ul></li></ul></div></div><food :food="selectedFood" ref="food"></food></div>

參考項目

https://github.com/zsqosos/eapp

參考文章

https://vue3js.cn

總結(jié)

以上是生活随笔為你收集整理的《移动应用开发》实验报告——仿饿了么商家页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。