一、 實(shí)驗(yàn)?zāi)繕?biāo)：
1.掌握使用Vue-CLI腳手架工具在自己的電腦上建立項(xiàng)目，并會(huì)運(yùn)行調(diào)試工具。
2.了解前端框架mint-ui的開發(fā)方法，掌握基本編程方法。
3.掌握手機(jī)網(wǎng)上商城網(wǎng)頁布局、圖片輪播等編程方法。
4.設(shè)計(jì)友好的操作界面，培養(yǎng)服務(wù)意識(shí)。

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

截圖展示：

主要代碼及實(shí)現(xiàn)方法簡介（請(qǐng)盡量配合截圖，描述清楚編程和開發(fā)過程和方法）：

<template><div class="home"><!-- 導(dǎo)航模塊 --><div class="index-category "><div class="category" v-for="(list,i) in lists" :key="i"><i class="iconfont" :class="list.icon" :style="{background:list.color}"></i><label>{{list.title}}</label></div></div><!-- 輪播模塊 --><Banner :imgArr="imgArr" :obj="{id:1,name:'abc'}"/><!-- 列表展示模塊 --><div class="index-main"><ul><li class="lists" v-for="item in items" :key="item.product_id"><router-link :to="'/detail/'+item.product_id"><img :src="item.product_img_url" width="150" height="150"/></router-link><label><b class="discount">{{item.product_uprice}}</b><span class="price-text">{{item.product_price}}</span></label></li></ul></div></div> </template><script>import Banner from '../components/Banner';export default {name: 'Home',data(){return {timer:null,n:0,lists:[{title:'領(lǐng)吃',icon:'icontongxunlu',color:'#ecbe35'},{title:'附近',icon:'iconfaxian',color:'#ecbe36'},{title:'搜索',icon:'iconfenlei',color:'#ecbe37'},{title:'我的',icon:'iconshouye1',color:'#ecbe38'},],imgArr:[require('../assets/img/a1.jpg'),require('../assets/img/a2.jpg'),require('../assets/img/a3.jpg')],items:[]}},components:{Banner},methods:{getList(){this.$http.get('/home/page/3/20').then(res=>{console.log(res);this.items = res.data.data;})}},mounted:function(){this.getList();} } </script> <template><div class="home"><h1>附近美食</h1><Banner :imgArr="abc"/></div> </template><script> import Banner from '../components/Banner';export default {name: 'Find',data(){return {abc:[require('../assets/img/b1.jpg'),require('../assets/img/b2.jpg'),require('../assets/img/b3.jpg'),require('../assets/img/b4.jpg'),require('../assets/img/b5.jpg')]}},components:{Banner} } </script> <template><div class="home"><form id="main" v-cloak><h1>Services</h1><ul><!-- 循環(huán)輸出 services 數(shù)組, 設(shè)置選項(xiàng)點(diǎn)擊后的樣式 --><li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}"><!-- 顯示訂單中的服務(wù)名，價(jià)格Vue.js 定義了貨幣過濾器，用于格式化價(jià)格 -->{{service.name}} <span>{{service.price | currency}}</span></li></ul><div class="total"><!-- 計(jì)算所有服務(wù)的價(jià)格，并格式化貨幣 -->Total: <span>{{total() | currency}}</span></div></form></div></template><script> import Banner from '../components/Banner';export default {name: 'mine',data(){return {services: [{name: '龍蝦',price: 300,active:true},{name: '生蠔',price: 400,active:false},{name: '三文魚',price: 250,active:false},{name: '火鍋',price: 220,active:false}]}},components:{Banner},methods: {toggleActive: function(s){s.active = !s.active;},total: function(){var total = 0;this.services.forEach(function(s){if (s.active){total+= s.price;}});return total;}} } </script> <template><div class="page"><cell-item label='賬戶序號(hào)' :value="number" :arrow='true' :url="myurl"></cell-item><cell-item label='姓名' :value="name" url='/student/changename'></cell-item><cell-item label='狀態(tài)' :value="mystate"></cell-item><cell-item label='會(huì)員積分' :value="number" :arrow='true' :url="myurl"></cell-item></div> </template> <script>import CellItem from '../views/CellItem.vue'export default{components:{CellItem},data:function(){return{number:'',name:'',state:0}},computed:{mystate:function(){return this.state==0 ? '正常':'禁用'},myurl:function(){return '/student/changenumber/' + this.number},activated:function(){if(sessionStorage.getItem('number')){this.number=sessionStorage.getItem('number')}}}} </script> <style> </style>

三、 心得體會(huì)：
1、 了解了界面布局設(shè)計(jì)、mint-ui的編程方法
2、 了解了界面布局設(shè)計(jì)和圖片輪播編程方法。
3、 創(chuàng)建了模仿餓了么手機(jī)前端，熟練了vue.js技術(shù)。

總結(jié)

以上是生活随笔為你收集整理的移动应用开发——实验六的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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