概述

一个基于vue的仿知乎日报的前端项目。

关于知乎日报：

知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。

主要功能

每天更新好文章，包括权威的时事解读、有趣的生活建议
　　更符合用户口味的「主题日报」，覆盖电影、财经、设计、体育等领域
　　长评优先展示
　　离线下载功能，及时缓存近期的 30 篇文章
　　更多贴心小细节：多图及长文预警；支持一键分享收藏；夜间模式

安装

# install dependencies
npm install

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

# build for production with minification
npm run build

技术栈

vue

vuex

vue-router

axios

mint-ui

在线演示

demo

github地址

个人博客地址

细节

API:

感谢Xiao Liang提供的API,所有 API 均由 知乎（Zhihu.Inc）提供。

跨域问题

由于浏览器的同源策略，不允许进行跨域请求，所以首先解决的就是跨域问题，以前采用的是开发时配置/config/index.js下的proxyTable选项，实际部署时采用nodejs转发，这次为了方便，采用了第三方API

状态管理

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