使用 Vue 2.0 实现服务端渲染的 HackerNews

简介:   Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能。同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration。

  Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能。同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration。vue-hackernews-2.0 是 Vue 作者在GitHub上面放的 Vue 2.0 的一个示例项目,结合 Express、vue-router & vuex 来构建,是很好的学习案例。

Features

  • Server Side Rendering
    • Vue + vue-router + vuex working together
    • Server-side data pre-fetching
    • Client-side state & DOM hydration
  • Single-file Vue Components
    • Hot-reload in development
    • CSS extraction for production
  • Real-time List Updates with FLIP Animation

Architecture Overview

Build Setup

Requires Node.js 6+

# install dependencies
npm install

# serve in dev mode, with hot reload at localhost:8080
npm run dev

# build for production
npm run build

# serve in production mode
npm start

  

您可能感兴趣的相关文章

 

原文链接:新手入门指导:Vue 2.0 的建议学习顺序

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

相关文章
|
1月前
Vue3只渲染一次 v-once
Vue3只渲染一次 v-once
|
1月前
|
JavaScript
Vue3 条件渲染 v-show
Vue3 条件渲染 v-show
Vue3 条件渲染 v-show
|
1月前
|
JavaScript
Vue3 条件渲染 v-if
Vue3 条件渲染 v-if
|
20天前
|
JavaScript 前端开发 索引
Vue嵌套循环渲染与条件渲染--v-for|v-if
Vue嵌套循环渲染与条件渲染--v-for|v-if
20 0
|
6天前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
14 2
|
25天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
20 0
|
1月前
|
JavaScript 前端开发
vue 条件渲染
vue 条件渲染
|
1月前
|
JavaScript 前端开发 索引
vue 列表渲染
vue 列表渲染
|
1月前
|
JavaScript
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace('地址')`或`this.$route.push({name:'地址',params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
|
1月前
|
JavaScript
Vue3 循环渲染 v-for
Vue3 循环渲染 v-for