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
- Activities list :
- Movie
- In theaters :
/movie/in_theaters?count= - Coming soon :
/movie/coming_soon?count= - Top 250 :
/movie/top250?count= - Single movie info :
/movie/subject/id
- In theaters :
- Book
- Search some books :
/book/search?q=&count= - Single book info :
/book/id
- Search some books :
- Search
- Search books :
/book/search?q= - Search movie :
/movie/search?q= - Search music :
/music/search?q=
- Search books :
Mock Douban Backend
- User Basic URI :
https://douban.herokuapp.com/user/ - Register
- Path:
/user - method:
POST
- Path:
- Login
- Path:
/user/:id - method:
GET
- Path:
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