用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: 本人大三狗，熱愛前端，求一份前端實習工做！郵箱zhixuanziben@gmail.com