概述
一个基于vue的仿知乎日报的前端项目。
关于知乎日报：
知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
主要功能
每天更新好文章，包括权威的时事解读、有趣的生活建议
更符合用户口味的「主题日报」，覆盖电影、财经、设计、体育等领域
长评优先展示
离线下载功能，及时缓存近期的 30 篇文章
更多贴心小细节：多图及长文预警；支持一键分享收藏；夜间模式
安装
# install dependencies npm install # serve with hot reload at localhost:8080npm 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
作者：xujingguo
链接：https://www.jianshu.com/p/f493960a614c