用vue制作饿了么首页

Posted 2021-01-19 dangdanghepingping

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

很明显的饿了么首页分为三个部分（组件），

    上面的头部（商家信息），

    中间路由

    购物车

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

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

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

 

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

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

至此，大架子达成。

 

接下来，丰满血肉。

引入axios