vue-hackernews-2.0支持服务端渲染,此demo是用vue-hackernews-2.0做的,主要用于了解服务端渲染。
github地址:https://github.com/liaojunhongyue/vue-hackernews-demo
项目启动:
- 执行
npm install或cnpm install安装依赖; - 进入到
mock文件夹下,执行node server.js,启动mock的接口; - 在进入到项目中执行
npm run dev启动项目。
项目主要包含:
- 用express去mock数据;
- 给
vue-hackernews-2.0框架增加eslint-loader、less-loader的配置; - 增加
element-ui; - 封装
axios来发送请求; - 用
asyncData和store做数据的预取和存储。
项目展示:

页面展示.jpg
与客户端渲染不同,服务端渲染对seo友好,并且可以渲染出后台接口返回的数据,如下图所示:

查看网页源代码看到的html.jpg