Awesome

<img src="./screenshot/douban_logo.png"> Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent

Features

Vue + vue-router + vuex + Superagent working together
Vuex divide store into modules
Modern JavaScript syntax with ES6
vue-cli webpack template
Single-file Vue Components
API request seperated
Real remote API and some mock data
eslint linter integration
Hot-reload in development
Css with Sass
No third party CSS framework
Complex and different style view logic
Infinite loading list
Complete search logic
Custom components like List, Rating, Tags ...
Authentication with JSON Web Tokens
Complete register login logic ......

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Libraries

Vuex : Centralized State Management for Vue.js
Vue-router : The official router for Vue.js
~~vue-resource : The HTTP client for Vue.js~~
Superagent : Ajax with less suck - (and node.js HTTP client to match)
vue-infinite-loading : An infinite scroll plugin for Vue.js 1.0 & Vue.js 2.0.
normalize.css : A collection of HTML element and attribute style-normalizations
vue-scroll-behavior : Completely customize the scroll behavior on route navigation

API

Douban Api V2

Basic URI : https://api.douban.com/V2/
Online activities
- Activities list : /event/list?loc=108288&count=&start=
- Single activitie info : /event/id
Movie
- In theaters : /movie/in_theaters?count=
- Coming soon : /movie/coming_soon?count=
- Top 250 : /movie/top250?count=
- Single movie info : /movie/subject/id
Book
- Search some books : /book/search?q=&count=
- Single book info : /book/id
Search
- Search books : /book/search?q=
- Search movie : /movie/search?q=
- Search music : /music/search?q=

Mock Douban Backend

User Basic URI : https://douban.herokuapp.com/user/
Register
- Path: /user
- method: POST
Login
- Path: /user/:id
- method: GET

For detailed explanation, checkout the Douban Api V2 and Douban Backend

File Structure

.
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── LICENSE
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── avatar.png
│   │   ├── book_zw.jpg
│   │   ├── camera.svg
│   │   ├── douban-app-logo.png
│   │   ├── pen.svg
│   │   ├── promotion_bg.jpg
│   │   └── user_normal.jpg
│   ├── components
│   │   ├── Banner.vue
│   │   ├── Card.vue
│   │   ├── DownloadApp.vue
│   │   ├── Group.vue
│   │   ├── HeaderBar.vue
│   │   ├── List.vue
│   │   ├── Rating.vue
│   │   ├── Scroller.vue
│   │   ├── Marking.vue
│   │   ├── SubNav.vue
│   │   ├── Tags.vue
│   │   ├── Types.vue
│   │   └── UserBar.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   │       ├── activities.js
│   │       ├── book.js
│   │       ├── group.js
│   │       ├── movie.js
│   │       ├── search.js
│   │       ├── subject.js
│   │       └── user.js
│   └── views
│       ├── BookView.vue
│       ├── DetailView.vue
│       ├── GroupView.vue
│       ├── HomeView.vue
│       ├── LoginView.vue
│       ├── MovieView.vue
│       ├── PagesView.vue
│       ├── RegisterView.vue
│       ├── SearchView.vue
│       ├── StatusView.vue
│       ├── SubjectView.vue
│       └── TalionView.vue
└── static
    └── logo.png

Change log

Aug 24, 2017:
- Merged PR #19
- Remove dist/, use tschaub/gh-pages
Aug 11, 2017:
- Add dir /screenshot.
- Update README fix screenshot
June 24, 2017:
- Update vue-scroll-behavior fix scroll behavior
May 28, 2017:
- Using superagent

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request

Thanks