Vue项目硅谷外卖（三）

最新推荐文章于 2024-04-10 22:07:04 发布
最新推荐文章于 2024-04-10 22:07:04 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： vue项目 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linmuqi0928/article/details/124166424
版权

将四个路由组件的静态页面写出，对于最上方的一栏，四个组件具有相同的样式，因此将具有相同样式的部分提取出来设计成一个新的组件，方便复用。

 

公共组件HeaderTop.vue代码如下：

 

<template>
  <header class="header">
<!--    定义一个插槽（等着组件的使用者进行填充） 这个是具名插槽-->
     <slot name="left"></slot>
    <span class="header_title">
        <span class="header_title_text ellipsis">{{title}}</span>
      </span>
    <slot name="right"></slot>
  </header>
</template>

<script>
    export default {
      name: "HeaderTop",
      //组件接收外部传过来的数据
      props:{
          //限制类型
          title:String
      }
    }
</script>

<style scoped>
  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    /*padding-bottom: 10px;*/
    background-color: #02a774;
  }
  .header_search i {
    width: 20%;
    margin-left: 20px;
    font-size: 30px;
    color: white;
  }
  .header_title{
    flex: 1;
    height: 30px;
    margin-top: 10px;
    border-radius: 20px;
    color: white;
    font-size: 20px;
    text-align: center;
  }
  .header_login{
    width:20%;
    height: 40%;
    margin-right: 20px;
    text-align: right;
    font-size: 20px;
    color: white;
  }


</style>

四个路由组件代码如下：

Msite.vue

<template>
  <div class="msite">
<!--    首页头部-->
    <HeaderTop title="临潼区西安工程大学计算机科学学院">
       <span class="header_search" slot="left">
        <i class="iconfont icon-sousuo"></i>
      </span>
      <span class="header_login" slot="right">
        <span class="header_login_text">登陆注册</span>
      </span>
    </HeaderTop>
<!--    首页导航-->
    <nav class="msite_nav">
      <div class="nav_items">
        <a class="nav_item">
          <img src="./images/nav/1.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
        <a class="nav_item">
          <img src="./images/nav/2.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
        <a class="nav_item">
          <img src="./images/nav/3.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
        <a class="nav_item">
          <img src="./images/nav/4.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
        <a class="nav_item">
          <img src="./images/nav/5.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
        <a class="nav_item">
          <img src="./images/nav/6.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
        <a class="nav_item">
          <img src="./images/nav/7.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
        <a class="nav_item">
          <img src="./images/nav/8.jpg" alt="">
          <span class="nav_title">甜品饮品</span>
        </a>
      </div>
      <a href="#" class="nav_spot">
        <span></span>
        <span></span>
      </a>
    </nav>
<!--    首页附近商家-->
    <div class="msite_shop_list">
      <div class="shop_header">
        <a href="#" class="iconfont icon-Order"></a>
        <span>附近商家</span>
      </div>
      <div class="shop_contents">
        <div class="shop_item">
          <img src="./images/shop/1.jpg" alt="">
        </div>
        <div class="shop_item">
          <img src="./images/shop/2.jpg" alt="">
        </div>
        <div class="shop_item">
          <img src="./images/shop/3.jpg" alt="">
        </div>
        <div class="shop_item">
          <img src="./images/shop/4.jpg" alt="">
        </div>

      </div>

    </div>
  </div>

</template>

<script>
  import HeaderTop from "../../components/HeaderTop/HeaderTop";
    export default {
      name: "MSite",
      components:{
        HeaderTop

      }
    }
</script>

<style scoped>
  *{
    box-sizing: border-box;
  }
  /*msite_header模块*/
  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    /*padding-bottom: 10px;*/
    background-color: #02a774;
  }
  .header_search i {
    width: 20%;
    margin-left: 20px;
    font-size: 30px;
    color: white;
  }
  .header_title{
    flex: 1;
    height: 30px;
    margin-top: 10px;
    border-radius: 20px;
    color: white;
    font-size: 20px;
    text-align: center;
  }
  .header_login{
    width:20%;
    height: 40%;
    margin-right: 20px;
    text-align: right;
    font-size: 20px;
    color: white;
  }
/*  msite_nav模块*/
  .msite_nav{
    background-color: white;
    width: 100%;
    /*不需要设置高，让里面内容把盒子撑开*/
    margin-top: 70px;/*msite_header是固定定位 脱标不占位置，所以要设个上边距才能把此盒子完全显示出来*/
  }
  .nav_items{
    display: flex;
    flex-wrap: wrap;
  }
  .nav_item{
    width: 25%;
    text-align: center;
  }
  /*重新设定图片尺寸*/
  .nav_item img{
    width: 150px;
    height: 150px;
  }
  .nav_title{
    display: block;
    text-align: center;
    font-size: 20px;
  }
  .nav_spot{
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .nav_spot span{
    width: 10px;
    height: 10px;
    margin: 10px;
    border-radius: 20px;
    background-color: #a5a4a4;
  }
/*msite_shop_list模块*/
  .msite_shop_list{
    margin-top: 20px;
    width: 100%;
    background-color: #fff;
  }
  .shop_header{
    padding-top: 20px;
    margin-bottom: 20px;
  }
  .shop_header a{
    color: #a5a4a4;
    font-size: 25px;
  }
  .shop_header span{
    font-size: 25px;
    color: #a5a4a4;
  }
  .shop_item{
    /*这里如果设外边距 会出现外边距合并问题*/
    padding: 20px 10px;
    border-top: 1px solid #e0dede;
  }
  .shop_item img{
    width: 200px;
    height: 200px;
  }
</style>

Order.vue

<template>
  <div class="order">
    <HeaderTop title="订单列表"></HeaderTop>
    <div class="order_no_login">
      <img src="./images/person.png" alt="">
      <h3>登录后查看外卖订单</h3>
      <button>立即登录</button>
    </div>
  </div>

</template>

<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop";

    export default {
      name: "Order",
      components:{
          HeaderTop
      }
    }
</script>

<style scoped>
  /*.header{*/
  /*  position: fixed;*/
  /*  top: 0;*/
  /*  left: 0;*/
  /*  width: 100%;*/
  /*  height: 45px;*/
  /*  color: white; !*这个属性不起作用 因为在reset.css默认样式文件中给a设置了灰色 优先级比这里高 所以在下面重新设置了一下*!*/
  /*  font-size: 20px;*/
  /*  text-align: center;*/
  /*  line-height: 45px;*/
  /*  !*padding-top: 10px;*!*/
  /*  !*padding-bottom: 10px;*!*/
  /*  !*padding-bottom: 10px;*!*/
  /*  background-color: #02a774;*/
  /*}*/
  /*.header_title_text{*/
  /*  color: white;*/
  /*}*/
  .order_no_login{
    padding-top: 140px;
    width: 60%;
    margin: 0 auto;
    text-align: center;
  }
  .order_no_login img{
    display: block;
    width: 100%;
    height: 30%;
  }
  .order_no_login h3{
    width: 100%;
    height: 20%;
    color: #999898;
    font-size: 20px;
  }
  .order_no_login button{
    margin-top: 10px;
    color: white;
    font-size: 20px;
    background-color: #02a774;
    /*去除button默认颜色样式*/
    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 10px;
  }

</style>

 Search.vue

<template>
  <div class="search">
    <HeaderTop title="搜索"></HeaderTop>
    <form class="search_form" action="#">
      <input class="search_input" type="search" placeholder="请输入商家或美食名称">
      <button class="search_button">提交</button>
    </form>
  </div>

</template>

<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop";
    export default {
      name: "Search",
      //映射成标签
      components:{
        HeaderTop
      }

    }
</script>

<style scoped>
  .search{
    width: 100%;
  }
  /*.header{*/
  /*  position: fixed;*/
  /*  top: 0;*/
  /*  left: 0;*/
  /*  width: 100%;*/
  /*  height: 45px;*/
  /*  color: white;*/
  /*  font-size: 20px;*/
  /*  text-align: center;*/
  /*  line-height: 45px;*/
  /*  !*padding-top: 10px;*!*/
  /*  !*padding-bottom: 10px;*!*/
  /*  !*padding-bottom: 10px;*!*/
  /*  background-color: #02a774;*/
  /*}*/
  .search_form{
    display: flex;
    margin-top: 45px;
    height: 45px;
    width: 100%;
  }
  .search_input{
    flex: 60%;
    margin: 5px 10px;
    background-color: #e0dfdf;
  }
  .search_button{
    width: 15%;
    margin: 5px 10px 5px 5px;
    color: white;
    font-size: 20px;
    background-color: #02a774;
    border: none;
  }

</style>

Profile.vue        

<template>
  <div class="profile">
    <HeaderTop title="我的"></HeaderTop>
    <div class="profile_number">
      <div class="profile_image">
        <i class="iconfont icon-wode-tianchong"></i>
      </div>
      <div class="user-info">
        <p class="user-info-top">登录/注册</p>
        <p>
            <span class="user-icon">
              <i class="iconfont icon-shouji1"></i>
            </span>
          <span class="icon-mobile-number">暂无绑定手机号</span>
        </p>
      </div>
      <span class="arrow">
          <i class="iconfont icon-jiantouyou"></i>
        </span>
    </div>
    <div class="profile_data">
      <div class="data_count">
        <span><i>0.00</i>元</span>
        <span>我的余额</span>
      </div>
      <div class="data_count">
        <span><i>0</i>个</span>
        <span>我的优惠</span>
      </div>
      <div class="data_count">
        <span><i>0</i>分</span>
        <span>我的积分</span>
      </div>
    </div>
    <div class="profile_items">
      <div class="items_list">
        <div class="list_image">
          <i class="iconfont icon-tongxunlu"></i>
        </div>
        <div class="list-info">
          <p>我的订单</p>
        </div>
        <span class="list_jiantou">
          <i class="iconfont icon-jiantouyou"></i>
        </span>
      </div>
      <div class="items_list">
        <div class="list_image">
          <i class="iconfont icon-shoucang-weixuanzhong"></i>
        </div>
        <div class="list-info">
          <p>积分商城</p>
        </div>
        <span class="list_jiantou">
          <i class="iconfont icon-jiantouyou"></i>
        </span>
      </div>
      <div class="items_list">
        <div class="list_image">
          <i class="iconfont icon-a-xihuandianzan"></i>
        </div>
        <div class="list-info">
          <p>硅谷外卖会员卡</p>
        </div>
        <span class="list_jiantou">
          <i class="iconfont icon-jiantouyou"></i>
        </span>
      </div>
      <div class="items_list">
        <div class="list_image">
          <i class="iconfont icon-dianzan"></i>
        </div>
        <div class="list-info">
          <p>服务中心</p>
        </div>
        <span class="list_jiantou">
          <i class="iconfont icon-jiantouyou"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderTop from "../../components/HeaderTop/HeaderTop";
    export default {
      name: "Profile",
      components:{
        HeaderTop
      }
    }
</script>

<style scoped>
/*header模块*/
/*  .header{*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 45px;*/
/*    color: white;*/
/*    font-size: 20px;*/
/*    text-align: center;*/
/*    line-height: 45px;*/
/*    !*padding-top: 10px;*!*/
/*    !*padding-bottom: 10px;*!*/
/*    !*padding-bottom: 10px;*!*/
/*    background-color: #02a774;*/
/*  }*/
  /*登录注册模块*/
  .profile_number{
    margin-top: 45.5px;
  }
  .profile_number{
    display: flex;
    width: 100%;
    height: 120px;
    background-color: #02a774;
  }
  .profile_image{
    width: 15%;
    line-height: 120px;
    text-align: center;
  }
  .profile_image i{
    font-size: 80px;
    color: white;
  }
  .user-info{
    width: 80%;
    margin: 35px 0;
  }
  .user-info-top{
    color: white;
    font-size: 20px;
    padding-bottom: 10px;
  }
  .icon-mobile-number{
    color: white;
    font-size: 20px;
  }
  .user-icon i{
    color: white;
    font-size: 20px;
  }

  .arrow{
    text-align: center;
    line-height: 120px;
    color: white;
  }
  .arrow i{
    font-size: 25px;
  }
/*  账户余额模块*/
  .profile_data{
    display: flex;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #a5a4a4;
  }
  .data_count{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #a5a4a4;
  }
  .data_count span{
    padding: 5px 0;
  }
  .data_count span i{
    padding-right: 5px;
    font-size: 40px;
    color: #F5A100;
  }
  .data_count:nth-child(-n+2){
    border-right: 1px solid #a5a4a4;
  }
  .profile_items{
    display: flex;
    flex-direction: column;
  }
  .items_list{
    display: flex;
    height: 80px;
    border-bottom: 1px solid #a5a4a4;
  }
  .list_image{
    width: 10%;
    color: #02a774;
    text-align: center;
    line-height: 80px;
  }
  .list_image i{
    font-size: 30px;
  }
  .list-info{
    width: 90%;
    color: black;
    font-size: 20px;
    line-height: 80px;
  }
  .list_jiantou{
    right: 0;
    color: #a5a4a4;
    text-align: center;
    line-height: 80px;
  }
</style>

Lmq!
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
shop_market:硅谷外卖原始码
03-23
shop_market 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。 项目依赖 使用vue init webpack <projectname>项目名称vue init webpack <projectname>项目 注意：使用此命令之前需要安装vue-cli脚手架工具 安装方法自行百度，在此不再多余述 按照终端提示进
2021-06-07跟做项目硅谷外卖
hui1203li的博客
09-25 460
一、项目开发准备 1、项目描述 是个外卖应用项目，是一个前后台分离的spa应用（（单页富应用程序））
基于springboot+vue实现外卖点餐系统，2024年最新2024年Web前端大厂面试分享
最新发布
wdsfgj的博客
04-10 989
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件一个人可以走的很快，但一群人才能走的更远。
Vue移动端项目---尚硅谷外卖
qq_42765662的博客
07-23 3045
使用Vue实现移动端外卖app
Vue项目硅谷外卖（一）项目准备
linmuqi0928的博客
04-12 512
本项目选自尚硅谷Vue实战教程，基于vue-cli2完成。 一、项目准备 1.创建vue-cli 进入到自己要安装项目的文件夹目录，我这里是 “D:\webpackProject\vue-cli2> ” 执行 “vue init webpack vue-cli2-project ” 命令，出现如下图提示 ，“vue-cli2-project” 是我们的项目文件夹的名字，就是最终显示在index.html中的title标签里和package.json中的，也可以自己进行修改，我们一般不会去改，直接
基于SpringBoot+vue的餐厅点餐外卖系统 【附源码】
无边热爱，来日方长
05-29 228
j基于SpringBoot+vue的餐厅点餐外卖系统 elementui 前后端分离
Vue硅谷外卖项目.zip
08-14
vue硅谷外卖项目前后,需要mongodb数据库，解压直接运行后，在运行前即可
尚硅谷Vue硅谷外卖项目视频
06-07
尚硅谷Vue硅谷外卖项目视频，支持尚硅谷，老师讲课真的很好的
vue项目硅谷外卖
08-10
vue项目: 硅谷外卖
Vue实战硅谷外卖 Vue-router
07-23
1) 此项目为外卖 Web App (SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术 4) 采用模块化、组件化、工程化的模式开发
基于springboot和vue2外卖点餐系统的项目总结
分享学习编程中的遇到的问题,总结平时的笔记
09-05 1983
🍑 基于springboot和vue的外卖点餐系统 😊
尚硅谷Vue硅谷外卖项目视频包含完整代码和文档
10-24
项目描述 : 1) 此项目为外卖 Web App (SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术 4) 采用模块化、组件化、工程化的模式开发
尚硅谷Vue硅谷外卖项目视频以及源代码
09-06
尚硅谷Vue硅谷外卖项目视频以及源代码，尚硅谷Vue硅谷外卖项目视频以及源代码
2018年最新vue2.5 硅谷外卖视频+源码
10-16
项目源码rar+百度云盘视频链接 项目描述: 01_vue项目_项目功能演示.avi 02_Vue项目_项目开发准备.avi 03_Vue项目_创建项目并运行.avi 04_Vue项目_资源准备.avi 05_Vue项目_项目源码目录设计.avi 06_Vue项目_stylus使用.avi 07_Vue项目_组件化编码.avi 08_Vue项目_引入vue-router.avi 09_Vue项目_FooterGuide组件.avi 10_Vue项目_各导航路由组件(静态).avi 11_Vue项目_HeaderTop组件.avi 12_Vue项目_使用swiper实现商品分类列表轮播.avi 13_Vue项目_ShopList组件(静态).avi 14_Vue项目_Login组件(静态).avi 15_Vue项目_启动后台应用并测试接口.avi 16_Vue项目_封装ajax请求函数.avi 17_Vue项目_封装接口请求函数.avi 18_Vue项目_使用git对项目进行版本控制.avi 19_Vue项目_复习.avi 20_Vue项目_配置代理实现跨域ajax请求.avi 21_Vue项目_创建vuex的整体结构.avi 22_Vue项目_使用vuex管理首页数据.avi 23_Vue项目_异步显示当前地地址.avi 24_Vue项目_异步显示食品分类轮播列表.avi 25_Vue项目_使用watch和$nextTick解决轮播的bug.avi 26_Vue项目_异步显示商家列表.avi 27_Vue项目_使用svg显示加载中提示界面.avi 28_Vue项目_Star组件.avi 29_Vue项目_注册登陆功能演示说明.avi 30_Vue项目_登陆界面效果1_切换登陆方式.avi 31_Vue项目_登陆界面效果2_手机号检查.avi 32_Vue项目_登陆界面效果3_倒计时效果.avi 33_Vue项目_登陆界面效果4_切换密码的显示和隐藏.avi 34_Vue项目_登陆界面效果5_前台表达验证.avi 35_Vue项目_复习.avi 36_Vue项目_动态一次性图形验证码.avi 37_Vue项目_定义接口请求函数.avi 38_Vue项目_登陆_发送短信验证码.avi 39_Vue项目_登陆_完成登陆请求.avi 40_Vue项目_登陆_保存用户信息到vuex.avi 41_Vue项目_登陆后更新个人中心界面.avi 42_Vue项目_登陆更新跳转路由.avi 43_Vue项目_自动登陆.avi 44_Vue项目_退出登陆.avi 45_Vue项目_搭建商家整体界面.avi 46_Vue项目_json的理解.avi 47_Vue项目_设计json数据.avi 48_Vue项目_使用mockjs模拟接口数据.avi 49_Vue项目_ajax请求mockjs模拟的接口.avi 50_Vue项目_ShopHeader组件.avi 51_Vue项目_复习.avi 52_Vue项目_异步显示goods数据.avi 53_Vue项目_滑动效果分析.avi 54_Vue项目_使用better-scroll实现回弹滑动.avi 55_Vue项目_收集scrollY.avi 56_Vue项目_收集tops.avi 57_Vue项目_滑动右侧列表更新当前分类.avi 58_Vue项目_解决惯性滑动不更新当前分类的bug.avi 59_Vue项目_点击分类项滑动右侧列表.avi 60_Vue项目_CartControl组件1.avi 61_Vue项目_CartControl组件2.avi 62_Vue项目_Food组件1.avi 63_Vue项目_Food组件2.avi 64_Vue项目_ShopCart组件1.avi 65_Vue项目_ShopCart组件2.avi 66_Vue项目_显示购物项列表.avi 67_Vue项目_解决列表显示的3个bug.avi 68_Vue项目_复习.avi 69_Vue项目_购物车动画.avi 70_Vue项目_购物车列表的滑动.avi 71_Vue项目_清空购物车.avi 72_Vue项目_ShopRatings组件1.avi 73_Vue项目_ShopRatings组件2.avi 74_Vue项目_ShopInfo组件1.avi 75_Vue项目_ShopInfo组件2.avi 76_Vue项目_ShopInfo组件3.avi 77_Vue项目_Search组件.avi 78_Vue项目_缓存路由组件对象.avi 79_Vue项目_路由组件懒加载.avi 80_Vue项目_图片懒加载vue-lazyload.avi 81_Vue项目_使用moment实现日期过滤器.avi 82_Vu
硅谷外卖
02-13
<<<<<<< HEAD guiguwaimai 硅谷外卖 天01 1.项目开发准备 项目描述 技术选型 API接口 你能从此项目中学到什么? 2.开启项目开发 使用脚手架创建项目 安装所有依赖/指定依赖 开发环境运行 生产环境打包与发布 3.建造项目整体界面结构 stylus的理解和使用 结构化, 变量, 函数/minxin(混合) vue-router的理解和使用 router-view/router-link/keep-alive $router: 路由器对象, 包含一些操作路由的功能函数, 来实现编程式导航(跳转路由) $route: 当前路由对象, 一些当前路由信息数据的容器, path/meta/query/params 项目路由拆分 底部导航组件: FooterGuide 导航路由组件: Msite/Search/Order/Profile 4
springboot+vue外卖点餐系统（源码+文档）
sinat_26552841的博客
03-21 981
风定落花生，歌声逐流水，大家好我是风歌，混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的网上商城购物系统。项目源码请联系风歌，文末附上联系信息。目前有各类成品java毕设，需要请看文末联系方式。javaweb，ssh，ssm，springboot等等项目框架，源码丰富，欢迎咨询。社团管理源码开发环境：后端：开发语言：Java框架：springbootJDK版本：JDK1.8数据库：mysql 5.7+数据库工具：Navicat11。
基于SpringBoot+Vue的外卖点餐管理系统
Yaml4的博客
02-05 1287
随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势社会的发展和科学技术的进步，互联网技术越来越受欢迎。网络计算机的生活方式逐渐受到广大人民群众的喜爱，也逐渐进入了每个用户的使用。互联网具有便利性，速度快，效率高，成本低等优点。因此，构建符合自己要求的操作系统是非常有意义的。本文从用户的功能要求出发，建立了外卖点餐系统 ，系统中的功能模块主要是实现管理员；
vue2 vant外卖项目实例
06-08
很抱歉，我没有权限访问互联网来提供你一个 Vue2 Vant 外卖项目实例。但你可以在以下网站上寻找相关示例： - GitHub: 在 GitHub 上搜索 "vue2 vant 项目实例" 或 "vue2 vant 外卖项目"，也许可以找到一些有用的项目...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值