Vue.JS開源：一個基于vue全家桶制作的在線電影影訊網站

前言

之前一直在學習原生的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
}

]

})`

再來幾張截圖