Vue 2.0 实现知乎日报

趁着 Vue 2.0 版本发布不久,赶紧写了个知乎日报的 demo 练练手。

截图:

使用 Vue 2.0, vue-router, vuex 支持服务端渲染。项目结构参考了 vue-hackernews-2.0

1.服务端渲染

组件定义一个 preFetch 的钩子函数,dispatch action 返回一个 promise。promise resolve 之后更新 state。等所有的 preFetch 钩子都 resolve 之后,获取初始状态,渲染页面。

会添加一个 server-rendered="true" 的属性。

<div id="app" server-rendered="true">...</div>

在 client 端,通过 window.__INITIAL_STATE__ 来获取初始状态。

2.使用 axios 进行 ajax 请求

因为需要服务端渲染,需要一个可以在 node 和浏览器端都可以运行的 ajax 库。axios 可以满足要求。

3.轮播图组件

没有找到支持 Vue 2.0 且 支持服务端渲染的轮播图组件。于是参考 bootstrap ,简单写了个轮播组件。有坑。

4.滚动到底部加载

偷懒直接写在 List.vue 里了。封装成 directive 或 component ,可能是最好的选择。

5.使用 scrollBehavior 滚动

在 vue-router 中,使用 scrollBehavior 方法来进行滚动行为。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

6.服务端部署

使用 pm2 管理 node。

pm2 start npm -- start

使用 nginx 进行反向代理。

server {
  ...
  # 反向代理知乎日报 api
  location /api/ {
    proxy_pass http://news-at.zhihu.com;
  }
  # 托管静态资源
  location /dist {
    root /var/www/vue-zhihudaily-2.0/;
  }

  # 反向代理 node
  location / {
    proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header   Host      $http_host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass         http://127.0.0.1:7000;
  }
}