前言：之前一直在学习原生的 javascript ，但是无奈功力太浅，学了很长时候也只能写一些简单的小 demo ，知道遇见了 vue ，一切都变了，他的双向绑定和组件化思想让我迅速的爱上了他，可是光学不练是没有什么成就感的，想着豆瓣提供了免费的 api 接口，不如就利用这个接口做一个电影网站，想想还是有点小激动的！

技术栈

技术栈当然首选 vue 全家桶啦，但是我这个 demo 是利用的豆瓣 api ，而且没有后台，所以 vuex 也就没什么用了，因此技术栈是 vue + vue-router + vue-resource + vue-cli 。

功能分析

功能参考了手机上的猫眼电影 app ，但是发现网上并没有在线选座的接口，于是这个功能无法实现，发现这个问题之后，赶紧去看看豆瓣 api 都提供什么信息，然而电影评论信息不提供， WTF ！怎么办？评论信息都没有，那信息量也太少了吧，这是开源运动就显得很棒了，在 github 上有人提供非官方版本的 api ，可以获得电影的短评和长评信息！有了 api 开始干!

效果预览

项目主要结构

路由部分

  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

用 vue 开发一个猫眼电影 web app

技术栈