详解基于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 <project-name>生成的文件目录结构如下:

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

Nuxt路由

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

pages/
--| user/
-----| index.vue
-----| one.vue
-----| _id.vue
--| index.vue

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

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'user',
   path: '/user',
   component: 'pages/user/index.vue'
  },
  {
   name: 'user-one',
   path: '/user/one',
   component: 'pages/user/one.vue'
  },
  {
   name: 'users-id',
   path: '/users/:id?',
   component: 'pages/users/_id.vue'
  },
 ]
}

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

export default {
 validate ({ params }) {
  // Must be a number
  return /^\d+$/.test(params.id)
 }
}

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

Nuxt视图

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

<template>
 <div>
  <header>VUE SRR DEMO</header>
  <nuxt/>
  <footer>COPYRIGHT LXY</footer>
 </div>
</template>

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

<template>
 <div class="container">
  <h1 v-if="error.statusCode === 404">页面不存在</h1>
  <h1 v-else>应用发生错误异常</h1>
  <p class="goback">
   <nuxt-link to="/">返回首页</nuxt-link>
  </p>
 </div>
</template>

<script>
export default {
 props: ['error'],
 layout: 'self-aside'
}
</script>

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

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

Nuxt asyncData 方法

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

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

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

async asyncData ({ params, error }) {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
  return {
   users: data.slice(0,5)
  }
 },

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

<ul>
  <li v-for="item in users" :key="item.name">{{item.name}}</li>
 </ul>

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

附一张Nuxt渲染的流程图:

总结

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

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

(0)

相关推荐

  • vue服务端渲染的实例代码

    一.什么是服务端渲染 客户端请求服务器,服务器根据请求地址获得匹配的组件,在调用匹配到的组件返回Promise (官方是asyncData方法)来将需要的数据拿到.最后再通过window.__initial_state=data将其写入网页,最后将服务端渲染好的网页返回回去.接下来客户端将用新的store状态把原来的store状态替换掉,保证客户端和服务端的数据同步.遇到没被服务端渲染的组件,再去发异步请求拿数据. 服务端渲染的环境搭建 这是vue官网的服务端渲染的示意图,ssr有两个入口文件,

  • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

  • vue服务端渲染添加缓存的方法

    什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序. 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行. 缓存 虽然 Vue 的服务

  • 详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun

  • 详解如何使用Vue2做服务端渲染

    花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SSR的优势有很多,现在让我来跟你细细道来. 技术栈 服务端:Nodejs(v6.3) 前端框架 Vue2.1.10 前端构建工具:webpack2.2 && gulp 代码检查:eslint 源码:es6 前端路由:vue-router2.1.0 状态管理:vuex2.1.0 服务端通信:axi

  • 详解基于 Nuxt 的 Vue.js 服务端渲染实践

    Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染 服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用

  • 基于vue-ssr服务端渲染入门详解

    第一部分 基本介绍 1.前言 服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: 1.服务器通过模版引擎直接渲染整个页面,例如java后端的vm模版引擎,php后端的smarty模版引擎. 2.服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加. 2.服务端渲染的优劣 服务端渲染能够解决两大问题: 1.seo问题,有利于搜索引擎蜘蛛抓取网站内容,利于网站的收录和排名.

  • 详解Nuxt.js Vue服务端渲染摸索

    本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的. 我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到.(2)用

  • 详解vue服务端渲染(SSR)初探

    前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服

  • vue服务端渲染操作简单入门实例分析

    本文实例讲述了vue服务端渲染操作.分享给大家供大家参考,具体如下: 想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!! 一,首先实现下官网的基本案例 随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json:创建server.js:然后按照vue-ssr官方链接:https://ssr.v

  • Vue 2.0 服务端渲染入门介绍

    1 什么是服务端渲染 SSR server side render 就是通过后端吐模板,而不是通过前端ajax获取数据,拼接字符串. 2 为什么需要SSR 需要SEO,因为爬虫不会等待ajax结果. 客户端网络慢,加载速度慢,影响用户体验. 3 另一种解决办法 预渲染 不是一次性下载整个单页应用,预渲染只是在构建时为了特定的路由生成特定的几个静态页面 你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染  4 NodeJS编写Vue的SSR 首先npm inst

随机推荐