無論是靜態網頁還是動態交互網頁，實現原則是將他們分塊，然后各個擊破。

很明顯的餓了么首頁分為三個部分（組件），

? ? 上面的頭部（商家信息），

? ? 中間路由

? ? 購物車

每部分先占住自己位置，然后挨個將這三部分分別實現完整。

我理解的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

總結

以上是生活随笔為你收集整理的用vue制作饿了么首页(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。