用vue開發一個貓眼電影web app

前言：之前一直在學習原生的javascript，但是無奈功力太淺，學了很長時候也只能寫一些簡單的小demo，知道遇見了vue，一切都變了，他的雙向綁定和組件化思想讓我迅速的愛上了他，可是光學不練是沒有什么成就感的，想着豆瓣提供了免費的api接口，不如就利用這個接口做一個電影網站，想想還是有點小激動的！

技術棧

技術棧當然首選vue全家桶啦，但是我這個demo是利用的豆瓣api，而且沒有后台，所以vuex也就沒什么用了，因此技術棧是vue + vue-router + vue-resource + vue-cli。

功能分析

功能參考了手機上的貓眼電影app，但是發現網上並沒有在線選座的接口，於是這個功能無法實現，發現這個問題之后，趕緊去看看豆瓣api都提供什么信息，然而電影評論信息不提供，WTF！怎么辦？評論信息都沒有，那信息量也太少了吧，這是開源運動就顯得很棒了，在github上有人提供非官方版本的api，可以獲得電影的短評和長評信息！有了api開始干!

效果預覽

項目主要結構

路由部分

`export default new Router({
routes: [

{
  path: '/inTheaters',
  name: 'inTheaters',
  component: inTheaters
},
{
  path: '/movie/:id',
  name: 'moviesMsg',
  component: moviesMsg
},
{
  path: '/comingSoon',
  name: 'comingSoon',
  component: comingSoon
},
{
  path: '/serchResult',
  name: 'serchResult',
  component: serchResult
},
{
  path: '/starMsg/:id',
  name: 'starMsg',
  component: starMsg
},
{
  path: '/comment/:id',
  name: 'comment',
  component: comment
},
{
  path: '/smallComment/:id',
  name: 'smallComment',
  component: smallComment
},
{
  path: '/searchPage',
  name: 'searchPage',
  component: searchPage
}

]
})`

再來幾張截圖

寫在最后

demo地址
github地址
覺得有用的幫忙給個star！
ps: 本人大三狗，熱愛前端，求一份前端實習工作！郵箱[e-mail]