VueJs+Axios+Nuxt.js+AntDesign实现豆瓣电影服务端渲染实战

作为目前较为流行的前后端分类开发模式,大部分的应用都是spa(当页应用),那么这样就会带来两个缺陷。其一、首屏渲染速度,其二、对SEO不友好。对于一些站点比如新闻站、博客等肯定是需要进行SEO的,那么服务端渲染这时候就派上用场了。个人花了大概半天时间学习了下服务端渲染方面的知识点。简单过了下Nuxt.js官网所有内容,然后就简单写了个Demo进行练习。

线上访问地址http://39.97.124.112:8089/nuxt/

认识Nuxt.js

-  认识服务端渲染:https://ssr.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E6%B8%B2%E6%9F%93-ssr-%EF%BC%9F

-  Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

项目组织结构图

VueJs+Axios+Nuxt.js+AntDesign实现豆瓣电影服务端渲染实战_第1张图片

关于nuxt.js目录结构可参考:https://zh.nuxtjs.org/guide/directory-structure

项目效果截图

(正在热映)
VueJs+Axios+Nuxt.js+AntDesign实现豆瓣电影服务端渲染实战_第2张图片

详情页
VueJs+Axios+Nuxt.js+AntDesign实现豆瓣电影服务端渲染实战_第3张图片

VueJs+Axios+Nuxt.js+AntDesign实现豆瓣电影服务端渲染实战_第4张图片

GitHub地址

https://github.com/huangche007/hc-nuxt-movie

For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

你可能感兴趣的:(vue.js,nuxt.js,服务端渲染)