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

最新推荐文章于 2022-06-08 10:17:09 发布

芦苇690

最新推荐文章于 2022-06-08 10:17:09 发布

阅读量1.5k

点赞数 1

分类专栏：前端学习移动应用开发文章标签： vue 移动开发 mint

本文链接：https://blog.csdn.net/maple_night/article/details/117588074

版权

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

摘要由CSDN通过智能技术生成

一、实验目标：

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