概述
一个基于vue的仿知乎日报的前端项目。
关于知乎日报：
知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
主要功能
每天更新好文章，包括权威的时事解读、有趣的生活建议
更符合用户口味的「主题日报」，覆盖电影、财经、设计、体育等领域
长评优先展示
离线下载功能，及时缓存近期的 30 篇文章
更多贴心小细节：多图及长文预警；支持一键分享收藏；夜间模式
安装
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
技术栈
在线演示
细节
API:
感谢Xiao Liang提供的API,所有 API 均由 知乎（Zhihu.Inc）提供。
跨域问题
由于浏览器的同源策略，不允许进行跨域请求，所以首先解决的就是跨域问题，以前采用的是开发时配置/config/index.js下的proxyTable选项，实际部署时采用nodejs转发，这次为了方便，采用了第三方APIJsonBird进行转发,可以避免跨域的问题，返回的是json对象。
轮播：
知乎日报在首页有5个top_stories，采用的是轮播方式展现出来的，为了实现轮播，采用的mint-ui的swipe组件，不过在使用的时候折磨了很久，最后发现原因是该组件没有设置默认的高度，需要手动设置，如果不设置，就什么都显示不出来。。。（尴尬。。。）
刷新
采用的同样是mint-ui下的组件，规定聚页面底部的距离阈值，小于阈值就触发自定义事件。
路由
vue-router的配置文件
import Vue from 'vue'
import Router from 'vue-router'
import showContent from '@/components/showContent'
import detail from '@/components/detail'
import message from '@/components/message'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/show', //显示新闻列表
name: 'showContent',
component: showContent
},
{
path: '/detail', //显示详细信息
name: 'detail',
component: detail
},
{
path: '/message', //消息页面
name: 'message',
component: message
}
]
})
状态管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
id: 9377231, //文章id
response: '',
top_stories: [], //标题文章
stories: '', //普通文章
date: 20170425 //日期
},
mutations: {
},
actions: {
},
})
export default store
防盗链
知乎在图片做了防盗链处理，只需要在header中加入
<meta name="referrer" content="never">
即可解决
运行截图
index.png
detail.png
message.png
文件结构
.
├── build
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── dist
│ ├── index.html
│ └── static
│ ├── css
│ ├── img
│ └── js
├── index.html
├── node_modules
├── package.json
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ ├── components //组件文件夹
│ │ ├── detailHeader.vue //详细信息的头部组件
│ │ ├── detail.vue //详细信息组件
│ │ ├── indexHeader.vue //首页组件头部
│ │ ├── messageHeader.vue //消息页面的头部组件
│ │ ├── message.vue //消息页面组件
│ │ └── showContent.vue //首页显示组件
│ ├── main.js
│ ├── router
│ │ └── index.js //vue-router的配置文件
│ └── store
│ └── index.js //vuex的配置文件
13 directories, 41 files
