《移动应用开发》实验——仿饿了么的APP

原创已于 2025-07-10 17:02:57 修改 · 1.7k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue #移动开发 #mint

于 2021-06-05 11:13:13 首次发布

前端学习同时被 2 个专栏收录

2 篇文章

订阅专栏

移动应用开发

2 篇文章

订阅专栏

本文介绍了如何使用Vue-CLI和Mint-UI框架进行移动应用开发，通过实例详细讲解了创建类似饿了么APP的过程，包括设置项目、安装依赖、实现手机商城布局、轮播图等功能，以及使用Mint-UI组件如Header、Navbar、TabContainer、Tabbar和Swipe等。此外，还提到了如何扩展Mint-UI的icon库并提供了项目完整下载链接。

一、实验目标：

1.掌握使用Vue-CLI脚手架工具在自己的电脑上建立项目，并会运行调试工具。
2.了解前端框架mint-ui的开发方法，掌握基本编程方法。
3.掌握手机网上商城网页布局、图片轮播等编程方法。
4.设计友好的操作界面，培养服务意识。

二、实验内容：

第一步：下载案例代码eapp-master.rar，使用VScode打开打开代码，查看代码中的README.md文件，安装依赖包，使用npm run dev运行源代码，了解界面布局设计、mint-ui的编程方法。
第二步：下载案例代码vue-shop-app.rar，了解界面布局设计和图片轮播编程方法。
第三步：使用vue-cli新建项目，使用vue.js,mint-ui等技术来创建一个模仿饿了么的APP 。只要求完成手机前端部分功能，不少于2个页面（主页、热门推荐、特色菜等），建议使用vue.js、mint-ui等技术。

主要实现页面为饿了么主页，热门分类榜单
截图展示
主页1
主页2
热门榜单
主要代码及实现方法简介（请尽量配合截图，描述清楚编程和开发过程和方法）：

使用vue创建webpack项目
进入项目文件夹，使用npm install mint-ui -s安装mint-ui
将Mint-UI全部引入

//在src文件下的main.js输入以下代码将Mint-UI全部引入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

首页布局，参考“饿了么”布局之后决定采用以下Mint-UI组件
（1）Header （2）Navbar （3）TabContainer （4）Tabbar （5）Swipe
Vue组件目录如下
主要代码展示
HelloWorld.vue
HTML部分

<div class="hello" style="width: 100%">
    <mt-header title="">
      <router-link to="/" slot="left">
        <mt-button icon="mintui mintui-dingwei">浙江省杭州市</mt-button>
        <!--            改成定位-->
        <!--            <mt-button @click="handleClose">关闭</mt-button>-->
      </router-link>
      <mt-button class="mintui mintui-gouwuche" slot="right" style="margin-right: 20px"></mt-button>
      <mt-button icon="mintui mintui-xiaoxi" slot="right"></mt-button>
    </mt-header>
    <!-- tab-container -->
    <mt-tab-container v-model="selected" >
      <mt-tab-container-item id="外卖">
        <div style="height: 60px;">
          <mt-search
            v-model="value"
            cancel-text="取消"
            placeholder="搜索"
          >
          </mt-search>
        </div>
        <mt-button class="searchKeyword" style="background: rgb(253,241,235);color: rgb(250,97,49)">🔥迷你一点点</mt-button>
        <mt-button class="searchKeyword" style="background: rgb(253,241,235);color: rgb(250,97,49)">🔥竹蜻蜓奶盖</mt-button>
        <mt-button class="searchKeyword">一点点</mt-button>
        <mt-button class="searchKeyword">奶茶</mt-button>
        <mt-button class="searchKeyword">汉堡</mt-button>
        <mt-button class="searchKeyword">炸串</mt-button>
        <mt-button class="searchKeyword">KFC</mt-button>
        <Menu/>
        <div class="hongbao">
          <span class="first">红包</span>
<!--          <span>你有2张总共18元的红包即将到期</span>-->
          <label style="font-size: 10px">你有2张总共18元的红包即将到期</label>
          <span class="second">去看看</span>
        </div>
        <Banner :imgArr="imgArr" :imgLimitTime="imgLimitTime"/>
        <div style="clear: both"></div>
        <div style="height: 10px"></div>
        <div class="Type_first">百亿补贴</div>
        <div class="Type">吃货联盟</div>
        <div class="Type">30分钟达</div>
        <div class="Type">无门槛红包</div>
        <div style="clear: both"></div>
        <router-link to="/buy" style="color: black">
          <Shop></Shop>
        </router-link>
        <router-link to="/buy" style="color: black">
          <Shop></Shop>
        </router-link>
        <router-link to="/buy" style="color: black">
          <Shop></Shop>
        </router-link>
        <router-link to="/buy" style="color: black">
          <Shop></Shop>
        </router-link>

      </mt-tab-container-item>
      <mt-tab-container-item id="真香">
        <mt-navbar style="overflow-x: scroll;overflow-y: hidden;width: 100%"  v-model="active">
          <mt-tab-item :key="n" v-for="n in foodList" style="padding-left: 10px;padding-right: 10px" :id=n><nobr>{{n}}</nobr></mt-tab-item>
        </mt-navbar>
        <div style="height: 3px"></div>
        <!-- tab-container -->
        <mt-tab-container v-model="active">
          <mt-tab-container-item id="盖浇饭">
            <top :key="n" v-for="n in num" :num="n"></top>
          </mt-tab-container-item>
          <mt-tab-container-item id="麻辣烫/关东煮">
            <mt-cell :key="n" v-for="n in 10" :title="'麻辣烫/关东煮 ' + n" />
          </mt-tab-container-item>
          <mt-tab-container-item id="炸鸡炸串">
            <mt-cell :key="n" v-for="n in 4" :title="'炸鸡炸串 ' + n" />
          </mt-tab-container-item>
          <mt-tab-container-item id="汉堡薯条">
            <mt-cell :key="n" v-for="n in 6" :title="'汉堡薯条 ' + n" />
          </mt-tab-container-item>
        </mt-tab-container>
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="外卖" >
        <img slot="icon" src="../assets/饿了吗_gaitubao_100x100.png">
        外卖
      </mt-tab-item>
      <mt-tab-item id="真香">
        <img slot="icon" src="../assets/发现_gaitubao_100x100.png">
        真香
      </mt-tab-item>
      <mt-tab-item id="订单">
        <img slot="icon" src="../assets/订单_gaitubao_100x100.png">
        订单
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="../assets/我的_gaitubao_100x100.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>

CSS部分

.searchKeyword{
  width: auto;
  height: auto;
  font-size: 4px;
  padding: 0 2px !important;
  border-radius: 10px;
}
.hongbao{
  width: 100%;
  height: 28px;
  border-radius: 5px;
  /*float: left;*/
  background: white;
  padding-top: 6px;
}
.first{
  margin-left: 10px;
  border-radius: 3px;
  font-size: 10px;
  padding: 0 2px;
  background: rgb(252,110,77);
  color: white;
}
.second{
  margin-left: 22%;
  border-radius: 8px;
  border: 1px rgb(252,110,77) solid;
  font-size: 10px;
  padding: 0 4px;
  background: white;
  color: rgb(252,110,77);
}
.Type_first{
  text-align: center;
  line-height: 30px;
  background: white;
  height: 30px;
  width: 24%;
  font-size: 15px;
  float: left;
  border-radius: 3px;
}
.Type{
  text-align: center;
  background: white;
  line-height: 30px;
  height: 30px;
  width: 24%;
  font-size: 15px;
  float: left;
  margin-left: 1.3%;
  border-radius: 4px;
}

JS部分

import Menu from './Menu'
import Banner from './Banner'
import Shop from './Shop'
import Top from './Top'
export default {
  name: 'HelloWorld',
  components: {Top, Shop, Banner, Menu},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      selected: '外卖',
      active: '盖浇饭',
      // active: this.selected
      value: '',
      imgArr: [
        require('../assets/1.png'),
        require('../assets/2.png'),
        require('../assets/3.png')
      ],
      imgLimitTime: require('../assets/沙拉.png'),
      num: 10,
      foodList: [
        '盖浇饭',
        '麻辣烫/关东煮',
        '炸鸡炸串',
        '汉堡薯条',
        '包子汤包',
        '奶茶果汁',
        '米饭米线',
        '烧烤',
        '川湘菜',
        '江浙菜',
        '卤味熟食'
      ]
    }
  },
}

Navbar与TabContainer实现下方菜单以及点击切换效果
在这里插入图片描述
Header与Search实现搜索框以及头部信息部分

Tabbar实现上方导航栏效果（可水平移动）

Swipe实现轮播图效果（具体实现于Banner组件）

PS

关于Mint-UI的icon库扩充

使用阿里巴巴矢量库，将所需要的图标添加至项目

在这里插入图片描述

点击项目设置，修改下面两项为mintui
点击复制代码，将链接添加到项目目录下的index.html

     <link rel="stylesheet" href="http://at.alicdn.com/t/font_2584136_hecbplji7is.css">

项目完整下载地址
https://download.youkuaiyun.com/download/Maple_Night/19401211?spm=1001.2014.3001.5501

参考文章

Mint-UI官方文档 http://mint-ui.github.io/#!/zh-cn