豆瓣电影，图书，音乐，广播，小组。vue2.0 + vue-router + axios + vuex + mint-ui
# git clone [email protected]:liangjilin/douban.git
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
.
├── README.md
├── build // vue-cli 自带的配置文件
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // vue-cli 自带的配置文件
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── css
│ │ │ ├──common.styl
│ │ │ │ ├──common.css
│ │ │ │ ├──cfont-awesome.min
│ │ ├── fonts
│ │ └── images
│ ├── components
│ │ ├── banner.vue //
│ │ ├── bookFiction.vue
│ │ ├── bookMoreItem.vue
│ │ ├── cityMoreItem.vue
│ │ ├── header.vue
│ │ ├── loading.vue
│ │ ├── movieMoreItem.vue
│ │ ├── musicMoreItem.vue
│ │ ├── rating.vue
│ │ ├── scroller.vue
│ │ ├── star.vue
│ │ └── tvMoreItem.vue
│ ├── main.js // 入口文件
│ ├── router // 路由
│ │ ├── index.js
│ ├── data // 自己写的模仿数据
│ │ ├── homeData.json
│ ├── fetch // fetch API
│ │ ├── api.js // axios配置及API封装
│ ├── vuex // 数据管理
│ │ ├── modules
│ │ │ ├── home.js
│ │ │ ├── main.js
│ │ │ └── video.js
│ │ ├── store.js
│ │ └── types.js
│ └── pages
│ ├── main.vue // 底部导航及页面绑定
│ ├── home
│ │ └── home.vue // 首页
│ ├── video // 书影音
│ │ ├── movie // 电影
│ │ │ ├── movie.vue
│ │ │ ├── movieDetail
│ │ │ │ └── movieDetail.vue // 电影详情
│ │ │ ├── movieMore
│ │ │ │ └── movieMore.vue // 正在热映
│ │ │ ├── movieSearch
│ │ │ │ └── movieSearch.vue // 即将上映
│ │ │ └── movieToplist
│ │ │ │ └── movieToplist.vue // 榜单
│ │ ├── book // 图书
│ │ │ ├── book.vue
│ │ │ ├── bookDetail
│ │ │ │ └── bookDetail.vue // 图书详情
│ │ │ ├── fictionMore
│ │ │ │ └── fictionMore.vue // 查看更多图书
│ │ │ └── newBookMore
│ │ │ │ └── newBookMore.vue // 新书速递
│ │ ├── city // 同城
│ │ │ ├── city.vue
│ │ │ ├── cityDetail
│ │ │ │ └── cityDetail.vue // 同城详情
│ │ │ ├── cityMore
│ │ │ │ └── cityMore.vue // 查看更多同城
│ │ ├── tv // 电视
│ │ │ ├── tv.vue
│ │ │ ├── tvMore
│ │ │ │ └── tvMore.vue // 查看更多电视剧
│ │ └── music // 音乐
│ │ │ ├── music.vue
│ │ │ ├── musicDetail
│ │ │ │ └── musicDetail.vue // music详情
│ │ │ ├── musicMore
│ │ │ │ └── musicMore.vue // 查看更多music
│ ├── broadcast
│ │ ├── broadcast.vue
│ │ └── broadcastDetail
│ │ │ └── broadcastDetail.vue // 广播详情
│ ├── group
│ │ └── group.vue // 小组
│ ├── mine
│ │ └── mine.vue // 小组
│ ├── login
│ │ └── login.vue // 登录
│ └── register
│ └── register.vue // 注册
├── static
│ ├── css
│ │ └──eric-meyer-reset.min.css // css reset
│ └── images
│ └──favicon.ico // icon
└── tree.md该应用使用了下面4个api：
/v2/book图书；/v2/movie电影；/v2/music音乐；v2/event同城。
更多关于豆瓣的api可以前往豆瓣api官网查看。
需要注意的是，由于豆瓣api的跨域问题，并不能直接通过ajax请求访问。不过vue-cli提供了代理的配置。
我们需要在/config/index.js中配置代理：
dev: {
env: require('./dev.env'),
port: 8070,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://api.douban.com',
changeOrigin: true,
pathRewrite:{
'^/api': ''
}
}
}vue-router, 请看vue路由配置。 axios请求，请用力戳Axios文档。 亦或你想了解关于页面或跨组件数据通讯等的用法，请点击传送门Vuex文档。 还是饿了么移动端组件库mint-ui,mint-ui官方文档。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent