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;
}
}