使用 vue2 制作一个知乎日报

知乎日报

  本项目主要使用 vue 的全家桶进行开发,项目中使用的 API 来自 知乎Api,通过完成此项目,加深了对 vue 全家桶的学习和理解。
  API在使用的过程中遇到了跨域的问题,通过搭建node http 服务,用于转发 API 请求,解决跨域问题,之后将 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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值