使用vue2搭建豆瓣電影

github地址

https://github.com/bhan614/do...

項目主頁展現

項目功能

• 正在熱映、即將上映、top250、電影詳情頁和搜索頁展現

• 地區切換

• 加載更多

• 搜索

• 滾動加載

Vue-cli

使用vue-cli腳手架搭建，按照步驟執行便可

npm install -g vue-cli
vue init webpack doubanMovie
cd doubanMovie
npm install
npm run dev

Element-ui

ui庫使用的是element-ui,直接引用使用

import Element from 'element-ui'
Vue.use(Element)

Vue-router2

路由使用的是默認的hash模式，後續打算更改成html5 history模式

請求豆瓣api

在proxyTable中配置代理

proxyTable: {
    '/api': {
        target: 'http://api.douban.com/v2',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

項目中使用瞭如下api

• /v2/movie/in_theaters 正在上映的電影

• /v2/movie/coming_soon 即將上映的電影

• /v2/movie/subject/:id 單個電影信息

• /v2/movie/search?q={text} 電影搜索

vue-resource

這裏使用vue-resource進行數據交互、不過更推薦使用axios

Vuex

vuex用來管理全局狀態，用起來很方便，能夠查看vuex文檔進行學習