详解基于vue的服务端渲染框架NUXT

前端之家收集整理的这篇文章主要介绍了详解基于vue的服务端渲染框架NUXT前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Nuxt

随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度。为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生。由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架——NUXT。在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2、vue-router、vuex、vux-Meta管理页面Meta信息的),利用官方的脚手架,基本上是傻瓜式操作,不用写路由配置,不用写webpcak配置就可以跑起来一个基于服务端渲染的SPA。

Nuxt特性

NUXT的特性包括

  1. 基于 Vue.js
  2. 自动代码分层
  3. 服务端渲染
  4. 强大的路由功能支持异步数据
  5. 静态文件服务
  6. ES6/ES7 语法支持
  7. 打包和压缩 JS 和 CSS
  8. HTML头部标签管理
  9. 本地开发支持热加载
  10. 集成ESLint
  11. 列表项目
  12. 支持各种样式预处理器: SASS、LESS、 Stylus等等

Nuxt目录结构

通过vue init nuxt-community/starter-template 生成文件目录结构如下:

其中有一些目录(layouts、pages、static、store、nuxt.config.js、package.json)是Nuxt保留的,不可以更改,需要注意一下。

Nuxt路由

Nuxt中的一大特点就是路由无需手动配置,会根据pages下的文件路径自动生成一套路由。如果路由中需要带参数,只需将pages下的文件已下划线_作为前缀即可。例如pages下的目录结构如下:

Nuxt自动生成的路由配置为:

而在vue文件中可以针对路由的参数进行校验,例如在pages/users/_id.vue文件

如果校验方法返回的值不为 trueNuxt自动加载显示 404 错误页面。而这个错误页面需要写在指定的位置,也就是layout中error页面。接下来就来介绍有关视图相关的东西。

Nuxt视图

可以在layouts目录下创建自定义的布局,可以通过更改 layouts/default.vue 文件来扩展应用的默认布局。需要在布局文件添加 组件用于显示页面的主体内容,感觉跟vue中的slot方法类似。例如在默认布局中增加header和footer,这样每个页面都会加上header和footer。

VUE SRR DEMO
COPYRIGHT LXY

而上面说到的error页面,可以通过在layouts下增加error.vue文件修改默认的错误页面。该页面可以接受一个error参数。

404">页面不存在

应用发生错误异常

回首页

也可以给某个页面指定特定的模板,做到个性化布局。例如在上面的error页面中,我指定了一个self-aside的模板

以上所说的都是有关布局和路由相关的东西,而还没有讲到有关服务端渲染的知识,究竟 Nuxt 是如何做到SSR的呢,关键人物要出场了。

Nuxt asyncData 方法

Nuxt 扩展了 Vue.js增加了一个叫 asyncData方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。这个函数可了不得了,有了它,我们可以先从服务员拿到数据,在服务端解析好,拼成HTML字符串,返回给浏览器。

asyncData方法会在组件每次加载之前被调用,它可以在服务端或路由更新之前被调用。 可以利用 asyncData方法获取数据,Nuxt 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。这个方法只能用在页面组件中,在componets下在公共组件是不能调用方法的,Nuxt 不会扩展增强该目录下 Vue 组件。

因为 asyncData 方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

上面demo中asyncData返回的数据赋值给了users,这样我就可以在页面中像使用data里的数据一样去使用users,例如我在template下循环出users

  • 我现在去查看源代码,发现页面中li中的数据已经渲染过来了,也就是达到了服务端渲染。

    附一张Nuxt渲染的流程图:

    总结

    整体感觉Nuxt还是很好上手的,利用脚手架,看看官方文档,写写demo,大致就能了解整个流程。但其中的具体实现细节,还需要去认真看看 https://ssr.vuejs.org/zh/

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/vue/31855.html

    猜你在找的Vue相关文章