Vue生态及实践 - Nuxt

Nuxt.js

Nuxt.js - Vue.js 通用应用框架 | Nuxt.js 中文网

Nuxt.js 中文教程_w3cschool

开源社区仁人志士创建了开箱可用的：Nuxt.js框架，帮助我们更快的实现ssr的同构。

• Nuxt.js是一个基于Vue.js的通用应用框架
• 它是对客户端，服务端基础架构的抽象组织，nuxt.js主要关注的是UI渲染
• 它预设了利用Vue.js来开发服务端渲染的应用所需要的各种配置
• Nuxt.js提供对基于Vue.js的应用生成对应的静态站点的功能【Prerender】
• Nuxt.js提供了强大的模块系统，可用便捷地使用REST或GraphQL接口，PWA以及AMP支持等都是作为模块来提供支持。

响应流程图

 

目标

• 实现nuxt-link组件
• 实现nuxt-link组件的服务端版本
• prefetch组件功能

 

nuxt-link

• 在通用代码中 不可接受特定平台的API；
• 因此如果代码中直接使用了像window或document这种仅浏览器可用的全局变量，则会在Node.js种执行时抛出错误，反之也是如此。

 src/components/ULink.client.vue

<template>
  <!-- 组件二次封装，要写上v-bind="$attrs" v-on="$listeners"，可用来触发原方法 -->
  <router-link v-bind="$attrs" v-on="$listeners">
    <!-- 默认文本部分 -->
    <slot></slot>
  </router-link>
</template>
<script>
export default {
  name: "u-link",
}

src/entry-client.js

// 全局注册一下客户端u-link
import ULink from "./components/ULink.client.vue";
Vue.component("u-link", ULink);

src/components/ULink.server.vue

<template>
  <!-- 组件二次封装，要写上v-bind="$attrs" v-on="$listeners"，可用来触发原方法 -->
  <router-link v-bind="$attrs" v-on="$listeners">
    <!-- 默认文本部分 -->
    <slot></slot>
  </router-link>
</template>
<script>
export default {
  name: "u-link",
}

src/entry-server.js

// 全局注册一下服务端u-link
import ULink from "./components/ULink.server.vue";
Vue.component("u-link", ULink);

App.vue

// router-link => u-link
<u-link
class="m-link"
:style="{
  backgroundColor:
    $route.name === nav.path ? theme.highlight : theme.primary,
}"
v-for="nav in language.navs"
:key="nav.path"
:to="nav.path"
:prefetch="true" // 使用自己写的那个prefetch
>{{ nav.name }}</u-link>

prefetch

// 浏览器的实现
<link rel="prefetch" href="/images/big.jpeg">

Prefetch是一项浏览器机制；这项机制利用浏览器闲置时间，预先下载并取回在将来可能会使用的网页资源并将其存在内存当中

// 在nuxt.js里面
<n-link to="/about" prefetch>About page pre-fetched</n-link>

在浏览器空闲时候发起请求,这个函数会将传入的callback函数添加到一个队列当中，并且会在浏览器空闲时，按照队列顺序执行空闲时间片段内能够完成的任务

window.requestIdleCallback(callback[,options])

React种的时间分片也是采用这个API实现的

献上一张ai生成图~