用vue制作饿了么首页(1)

无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破。

很明显的饿了么首页分为三个部分(组件),

    上面的头部(商家信息),

    中间路由

    购物车

每部分先占住自己位置,然后挨个将这三部分分别实现完整。

我理解的vue里,index.html好比是车轱辘,main.js就好比是变速箱,App.vue就好比是汽车方向盘和档把子,其他各个组件就好比是方向盘上的喇叭,转向等等,一环扣一环的关系。

我们操作是方向盘,就是写App.vue里的各种组件。当然引入一些工具文件时候别忘了在main.js里写引入,像router,mock,vuex等

 

写三个模板,分别对应头,路由和购物车,并在App.vue里引入他们。

路由也巨简单,最平常的就能搞定,佩佩路径和模板,别忘了写model:“history”,在路由组件里引入。

至此,大架子达成。

 

接下来,丰满血肉。

引入axios  

 

转载于:https://www.cnblogs.com/dangdanghepingping/p/9932031.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值