正文

基于vue来开发一个仿饿了么的外卖商城(代码片段)

小小小华  小小小华  2022-11-24  363

关键词：

一、准备工作

1.大前提：已安装好node、 npm、 vue、 vue-cli、stylus（此项目使用stylus来编译）

2.开发软件：Google Chrome（建议安装插件vue-devtools，方便调试），webstorm / sublime Text / VS Code （推荐使用webstorm，sublime 和 VS Code需要安装相应的插件）

3.项目结构：

4.项目结构分析：

5. 图标准备

推荐在阿里巴巴矢量图库查找需要的图标，官网地址：https://www.iconfont.cn

使用步骤：

a.注册用户

b.按照项目需求将相应的图标添加到库（购物车）

c.点击购物车，将图标添加到项目中

d.选中Font-class，此时会出现相应的代码连接，将链接复制到项目的index.html中，如下所示：

<link href="//at.alicdn.com/t/font_955721_h2wm4c3aixr.css" rel="stylesheet">

View Code

此时在编辑vue文件时可以直接使用相应的class=“iconfont icon-xxx”来获取相应的图标。示例：

<span>
    <i class="iconfont icon-shangcheng"></i>
</span>

View Code

6.编译基础样式

reset.css

二、移动端配置与基础路由配置

1.使编辑页面自适应手机屏幕（解决双击缩放）

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="./static/css/reset.css">

View Code

2.解决点击响应的延时0.3s问题

300ms延迟问题：移动端的双击缩放

解决方法：使用fastclick，具体查看链接：http://www.cnblogs.com/lyyguniang/p/9284968.html

在index.html中编辑

<script type=\'application/javascript\' src=\'https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js\'></script>
<script>
      if(\'addEventListener\' in document) 
        document.addEventListener(\'DOMContentLoaded\',function()
          FastClick.attach(document.body);
        ,false);
      
    </script>

View Code

3.使用vue-router编辑基础路由

参考链接：http://www.cnblogs.com/SamWeb/p/6610733.html

首先下载vue-router

npm install vue-router --save

index.js

// 导入模块
import Vue from \'vue\'
import Router from \'vue-router\'

// 引入组件
import Msite from \'../pages/Msite/Msite.vue\'
import Search from \'../pages/Search/Search.vue\'
import Order from \'../pages/Order/Order.vue\'
import Profile from \'../pages/Profile/Profile.vue\'

// 告诉vue使用vueRouter
Vue.use(Router)

// routes是路由的数组，有两部分组成：path和 component，最后由router来管理路由
export default new Router(
  routes: [
    
      path: \'/\',
      redirect: \'/msite\'
    ,
    
      path: \'/msite\',
      component: Msite
    ,
    
      path: \'/search\',
      component: Search
    ,
    
      path: \'/order\',
      component: Order
    ,
    
      path: \'/profile\',
      component: Profile
    
  ]
)

View Code

main.js

import Vue from \'vue\'
import App from \'./App\'
// 引用路由
import router from \'./router\'

/* eslint-disable no-new */
new Vue(
  el: \'#app\',
  render: h => h(App),
  router //将路由注入到跟实例中
)

View Code

问：什么是render: h=> h(App)

查看链接：https://segmentfault.com/q/1010000007130348

vue-router包含router-link和router-view，前者负责点击跳转，后者负责页面渲染。在饿了么app中，是点击底部导航来跳转到相应的路由页面的，此时在app.vue中导入底部导航组件，当点击相应的图标时，跳转路由

App.vue

<template>
    <div id="app">
        <router-view/>
        <FooterGuide></FooterGuide>
    </div>
</template>

<script>
import FooterGuide from \'./components/FooterGuide/FooterGuide.vue\'
export default 
  components: 
    FooterGuide
  

</script>
<style lang="stylus" rel="stylesheet/stylus">
    .app
        width 100%
        height 100%
        background #f5f5f5
</style>

View Code

三、编辑底部导航FooterGuide组件

技术点：用v-on:click,$route实现点击相应图标跳转路由

$route.path和class实现点击相应的图标的时候，图标样式动态改变

问：$router和$route的区别

查看链接：https://www.jianshu.com/p/fa0b5d919615

示例：

       <div class="guide_item" :class="on: \'/msite\'===$route.path" @click="goto(\'/msite\')">
            <span class="item_icon">
                <i class="iconfont icon-changyonglogo40"></i>
            </span>
            <span>首页</span>
        </div>

View Code

<script>
export default 
  methods: 
    goto (path) 
      this.$router.replace(path)
    
  

</script>

View Code

四、各路由静态页面的编辑

提示：在首页中使用swiper来实现图片轮播

查看官方文档：https://www.swiper.com.cn/

首先npm install swiper --save

接着编写html，大体格式如下：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>

View Code

编写JavaScript

<script>
import Swiper from \'swiper\'
import \'swiper/dist/css/swiper.min.css\'
export default 
  mounted () 
    /* eslint-disable no-new */
    new Swiper(\'.swiper-container\', 
      pagination: 
        el: \'.swiper-pagination\'
      ,
      loop: true
    )
  

</script>

View Code

注意：这个时候运行会有一个报错

报错：Do not use \'new\' for side effects

解决方法：在new上加上注释 /* eslint-disable no-new */

查看链接：https://www.jianshu.com/p/3a7982110656

五、最后运行npm run dev

六、各种注意点归纳

1.vue运行的时候报错： Parsing error:x-invalid-end-tag

解决方法：https://blog.csdn.net/zy13608089849/article/details/79545738

2.报错：Newline required at end of file but not found

原因：编辑style时底部要空多一行

解决方法：https://www.cnblogs.com/qingqingzou-143/p/7067604.html

3.报错：Component template should contain exactly one root element.

解决方法：https://segmentfault.com/q/1010000008361637

4.在编写stylus样式的时候，切记按着格式编写，如果运行的时候没有报错，但是样式没有显示，估计就是格式编写错误，注意空格

最后附上项目源码：

https://github.com/xinhua6/gshop.git

之后会逐步完善该项目，敬请期待。

一个基于springboot+redis+vue仿饿了么外卖系统（后台+移动端），可二次开发接私活！...(代码片段)

...完整的外卖系统，包括手机端，后台管理，api基于springboot和vue的前后端分离的外卖系统包含完整的手机端，后台管理功能本项目主要供交流学习，不建议商用02技术栈核心框架：SpringBoot数据库层：Spring... 查看详情

vue.js高仿饿了么外卖app

1.架构从传统的MVC向RESTAPI+前端MV*迁移参考链接：http://blog.csdn.net/broadview2006/article/details/8615055http://blog.csdn.net/u013628152/article/details/42709033MV*包括：MVC、MVP、MVVMvue.js是MVVM框架 2.Iconmoon制作图标字体2 查看详情

基于vue2+nuxt构建的高仿饿了么（2018版）(代码片段)

...预览）移动端扫描下方二维码API接口文档接口文档地址（基于apidoc）技术栈vue2+vuex+vue-router+mint-ui+nuxt项目运行gitclone[email protec 查看详情

基于springboot+redis+vue仿饿了么外卖系统（后台+移动端）

优质文章，第一时间送达六、运行效果前端展示（点击图片查看大图）后台管理（点击图片查看大图）七、源码下载源码下载云盘链接:链接：https://pan.baidu.com/s/1djb2BmP3S6l9OfzT62Nd6A提取码：lry9复制这... 查看详情

vue.js高仿饿了么外卖app2016最火前端框架百度云

...快20%-50%，尽管在某些情况下还要更快）。我们可以提供一个到这个参照项目的链接，但是坦率的说，所有的参照在某些方面是有缺陷的，很少有像你所写的一个真实应用。那么，让我们详细了解下吧。渲染性能在渲染用户界面... 查看详情

仿饿了么首页导航栏（viewpager）

...了么首页中我们能看到这样的布局（如下图）。红框内是一个可以左右滑动的页面，每一个页面类似于九宫格，都有可供点击图标。对于这样的布局，我在网上找了很久都没有找到相关的名称，所以我这里暂时叫它导航页吧。最... 查看详情

仿饿了么购物车下单效果

仿饿了么购物车下单效果前一段由于新项目需要，开发一个类似饿了么购物车下单效果，电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。效果图如下:主要的功能：就是左侧展示分类，右侧展示分类下商品的，... 查看详情

饿了么购物车动画(代码片段)

...是怎么实现的，但是看了很多仿饿了么的demo都是实现了一个完整的大的项目，要找到那个小模块很麻烦，所以自己将联动菜单和动画提取出来写了一个demo，方便学习。目的只是想突出功能所以界面细节很relax，大家也relax的看看... 查看详情

经典文摘：饿了么的pwa升级实践（结合vue.js）

...内web与浏览器生态的发展。您可能感兴趣的相关文章网站开发中很有用查看详情

高仿饿了么mock本地数据(代码片段)

新版webpack.dev.conf.js配置本地数据访问：//引入express模块constexpress=require(‘express‘)//创建express对象constapp=express()//引入请求文件加载本地数据文件constappData=require(‘../data.json‘)//获取对应的本地数据constseller=appData.sellerconstg 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用：vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

vue饿了么的技术点

一：项目目录设计。1：制作矢量图片的图标字体。打开icomoon.io网站,点击importicons，上传自己的svg图片，制作自己的图片，上传之后点击generatefont图标，下载然后把其中的font文件夹复制，style.css复制到style文件夹，修改为icom.styl... 查看详情

前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版

...相应的商品分类也会跟着跳转。2.用户评价页面主要包括一个TAB栏，包括三部分：全部、有图和评价三个模块3.商家信息页面主要介绍一些商家基本信息，可以通过better-scroll插件，进行左右滑动图片。效果预览：再说一篇，是饿... 查看详情

饿了么订单记录怎么删除

...之后，我们就能够看到自己在饿了么订过的单了哦。找到一个我们需要删除的订单。左滑3、左滑后会出现一个删除的字样，点击4、自动弹出框框显示是否确认删除订单哦，点击继续删除就可以了呢。参考技术A饿了么是一个点外... 查看详情

外卖订单爬虫（美团，饿了么，百度外卖）

...是用来抓取外卖平台（美团，饿了么，百度）的商户订单开发，并不是一个通用库，而是为这个特定场景进行开发的。适用场景：餐饮企业拥有多家外卖门店，订单量非常大，有对订单进行数据分析的需求。主要功能：每天定时... 查看详情

饿了么的架构设计及演进之路

网站在刚开始的时候大概只是一个想法：一个产业的模型，快速地将它产生出来。“快”是第一位的，不需要花太多精力在架构设计上。在网站进入扩张期才需要对架构投入更多的精力来承载网站在爆发时的流量。饿了么成立已... 查看详情

仿饿了么项目-vue-cli开启项目

环境搭建安装nodeJs在用vue-cli开启项目之前，首先我们需要安装Node环境，安装Node很简单，只需要去官网下载http://nodejs.cn/download/，下载完成后点击安装，安装过程很简单，一直next即可，安装完成会自动添加node及npm环境变量。检... 查看详情

美团饿了么外卖点菜界面联动菜单性能优化(代码片段)

...骤3采用的是实时遍历，现在抛弃这种做法。而是，生产一个跳转函数，可以使用if...else也可以使用switch...case，这里选用后者，因为性能更加出众。注：生成的jumpFunc是字符串，需要使用eval()来进行函数转换。5.代码示例(vue)计算... 查看详情