使用 vue2 制作一个知乎日报

知乎日报

　　本项目主要使用 vue 的全家桶进行开发，项目中使用的 API 来自知乎Api，通过完成此项目，加深了对 vue 全家桶的学习和理解。
　　API在使用的过程中遇到了跨域的问题，通过搭建node http 服务，用于转发 API 请求，解决跨域问题，之后将 node http 服务部署到 Heroku ，可以在线访问。

搭建 node http 服务
部署到Heroku

项目地址

https://github.com/yangrenmu/zhihuDaily

演示

在线演示
移动端演示，扫描下面二维码即可。

技术栈

vue
vuex
vue-router
axios
swiper

Build Setup

# install dependencies
npm install# serve with hot reload at localhost:8080
npm run dev# build for production with minification
npm run build# build for production and view the bundle analyzer report
npm run build --report

项目结构

├── src
│   ├── common
│   │   ├── css                   // 公共的 css
│   │   └── fonts                 // 图标字体 iconfont
│   ├── components
│   │   ├── Article.vue           // 文章
│   │   ├── ArticleList.vue       // 文章列表
│   │   ├── Comment.vue           // 评论
│   │   ├── HomePage.vue          // 首页
│   │   ├── Sidebar.vue           // 侧边栏
│   │   ├── Swiper.vue            // 轮播图
│   │   └── Theme.vue             // 日报主题
│   ├── router
│   │   └── index.js              // 路由配置
│   ├── vuex
│   │   └── store.js              // 状态管理
│   ├── App.vue                   // 主组件，切换页面
│   └── main.js                   // 初始化 vue 实例并使用需要的插件
├── static                        // 静态资源，css 样式重置及 swiper 插件
├── eslintrc.js                   // 配置 eslint
├── index.html                    // 项目入口文件
└── package.json                  // 项目配置文件

项目截图

作者：yangrenmu
链接：http://www.jianshu.com/p/5b4b27be86ca
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

使用 vue2 制作一个知乎日报相关推荐

手把手教你仿一个知乎日报Android客户端（一）多图
本文为作者原创,转载请注明出处@大蘑菇的博客图片托管服务由贴图库提供作为一只网虫,肯定是经常泡在网络的海洋里,有一天偶然看到了知乎日报的API,各方面接口都还挺全面,于是本着"不用白不用 ...
使用vue.js构建一个知乎日报
Vue.js是我所喜爱的,知乎也是我喜爱的,突发奇想使用vue做了一个知乎日报项目地址: Github地址在线预览demo 设计: 1.设计上没有按照知乎日报客户端的交互及UI设计来做,本渣亲自捏 ...
Vue写一个知乎日报
说明: vue构建页面 vue directive自定义事件 node代理服务 jsonp跨域获取知乎数据 webpack打包 axios请求数据使用: 1.在拉下来的项目中自己添加webpack项 ...
一个开源「知乎日报」Android 客户端
2019独角兽企业重金招聘Python工程师标准>>> 一个知乎日报客户端 - 知乎小报体验体验apk 介绍如你所见,这是一个知乎日报客户端,我给它起名为:知乎小报. 因为有大 ...
php微信开发例子,微信开发实战之知乎日报
前言看了那么多的小程序入门,想必各位看官也差不多对小程序已经有了一定的了解.这篇文章就不再主讲入门,现在我们要通过一个知乎日报的小程序去实践一下,加深对微信小程序API的理解. 好了,下面我们开始吧 ...
android知乎日报中的动画,开发Android知乎日报（一）简介
对于一个新手来说开发一个完整点的项目还是会有点难度的,可是真的开发过了就会明白,其实开发一个项目,知识已知知识点的堆叠,今天我从0开始开发一个知乎日报,希望能给新手一些帮助吧.代码会同步到GitHub ...
深入折腾 Weex，知乎日报客户端开发
深入折腾了一下 Weex,做了一个知乎日报的客户端,同时实现了一种目前 Weex 尚未提供的 Native 页面切换思路. 最后效果如下: 这个 demo 主要实践 4 件事情: 1. 模块注册 2. ...
android版知乎日报客户端应用源码
如你所见,这是一个知乎日报客户端,我给它起名为:知乎小报,大家可以下载安装体验一下,见附件.IOS版本源码:http://code.662p.com/view/9004.html 因为有大把的时间需要 ...
react 版的知乎日报
知乎日报项目主要使用了 react + react-router + axios + react-slick,API 来自 @izzyleung.这个项目是使用 react 写的第一个项目,边看文档 ...