今天介绍一个近期制作的基于UniApp的Vue外卖商城，可以编译成小程序、安卓或苹果的APP。
介绍
管理员、商家、用户三种角色；
管理员可以审核商品和商家等；
商家可以上传商品、查看订单、发货等；
用户可以下单购买商品、评价等；
后台 SpringBoot框架 MySql数据库；
前台 UniApp；
何为UniApp?
uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
首页代码展示
<view class="container">
<!-- 小程序头部兼容 -->
<!-- #ifdef MP -->
<view class="mp-search-box">
<input class="ser-input" type="text" value="输入关键字搜索" />
</view>
<!-- #endif -->
<!-- 头部轮播 -->
<view class="carousel-section">
<!-- 标题栏和状态栏占位符 -->
<view class="titleNview-placing"></view>
<!-- 背景色区域 -->
<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
<swiper class="carousel" circular @change="swiperChange">
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({title: '轮播广告'})">
<image :src="item.src" />
</swiper-item>
</swiper>
<!-- 自定义swiper指示器 -->
<view class="swiper-dots">
<text class="num">{{swiperCurrent+1}}</text>
<text class="sign">/</text>
<text class="num">{{swiperLength}}</text>
</view>
</view>
<!-- 分类 -->
<view class="cate-section">
<view class="cate-item" v-for="(item,index) in typeList" :key="item.id" @click="navTo(item.id)">
<image :src="'/static/temp/c4-'+(index+1)+'.png'"></image>
<text>{{item.name}}</text>
</view>
</view>
<view class="ad-1">
<image src="/static/temp/ad1-2.jpg" mode="scaleToFill"></image>
</view>
<!-- 秒杀楼层 -->
<!-- <view class="seckill-section m-t">
<view class="s-header">
<image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image>
<text class="tip">8点场</text>
<text class="hour timer">07</text>
<text class="minute timer">13</text>
<text class="second timer">55</text>
<text class="yticon icon-you"></text>
</view>
<scroll-view class="floor-list" scroll-x>
<view class="scoll-wrapper">
<view
v-for="(item, index) in goodsList" :key="index"
class="floor-item"
@click="navToDetailPage(item)"
>
<image :src="item.image" mode="aspectFill"></image>
<text class="title clamp">{{item.title}}</text>
<text class="price">￥{{item.price}}</text>
</view>
</view>
</scroll-view>
</view> -->
<!-- 团购楼层 -->
<!-- <view class="f-header m-t">
<image src="/static/temp/h1.png"></image>
<view class="tit-box">
<text class="tit">精品团购</text>
<text class="tit2">Boutique Group Buying</text>
</view>
<text class="yticon icon-you"></text>
</view>
<view class="group-section">
<swiper class="g-swiper" :duration="500">
<swiper-item
class="g-swiper-item"
v-for="(item, index) in goodsList" :key="index"
v-if="index%2 === 0"
@click="navToDetailPage(item)"
>
<view class="g-item left">
<image :src="item.image" mode="aspectFill"></image>
<view class="t-box">
<text class="title clamp">{{item.title}}</text>
<view class="price-box">
<text class="price">￥{{item.price}}</text>
<text class="m-price">￥188</text>
</view>
<view class="pro-box">
<view class="progress-box">
<progress percent="72" activeColor="#fa436a" active stroke-width="6" />
</view>
<text>6人成团</text>
</view>
</view>
</view>
<view class="g-item right">
<image :src="goodsList[index+1].image" mode="aspectFill"></image>
<view class="t-box">
<text class="title clamp">{{goodsList[index+1].title}}</text>
<view class="price-box">
<text class="price">￥{{goodsList[index+1].price}}</text>
<text class="m-price">￥188</text>
</view>
<view class="pro-box">
<view class="progress-box">
<progress percent="72" activeColor="#fa436a" active stroke-width="6" />
</view>
<text>10人成团</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view> -->
演示视频
基于uniapp的VUE外卖小程序、APP
