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

2020/5/10 5:26:22

本文主要是介绍VueJs+Axios+Nuxt.js+AntDesign实现豆瓣电影服务端渲染实战,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

认识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) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

项目组织结构图

aaa.png

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

项目效果截图

(正在热映)
aaa.png
(Top250)
aaa.png

详情页
aaa.png

aaa.png

GitHub地址

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

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



这篇关于VueJs+Axios+Nuxt.js+AntDesign实现豆瓣电影服务端渲染实战的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程