Nuxt.js

什么是 Nuxt.js？

Nuxt.js 是⼀个基于 Vue.js 的服务端渲染应⽤框架，它能够帮助我们快速地构建出具有良好 SEO 效果的应⽤ 程序， Nuxt.js 框架集成了常⻅的 Vue.js 插件，例如路由、状态管理器、打包压缩等功能，⽆需⾃⾏配置即可使⽤

Nuxt.js框架相对Vue.js框架的优势 

• Nuxt.js 与 Vue.js 都是基于 Vue.js 的应⽤框架
• Nuxt.js 提供了服务端渲染的⽀持，能够提⾼⻚⾯ SEO 效果，加速⻚⾯加载速度，从⽽提升⽤户体验。
• Nuxt.js 集成了路由、数据存储和打包压缩等⽅⾯的功能，使⽤者⽆需⼿动配置。
• Nuxt.js ⽀持⼀些特性，例如⾃动⽣成路由配置、服务器端数据传递等。 

Nuxt.js 框架服务端渲染原理

 Nuxt.js 框架是基于 Node.js 的，它通过在服务端进⾏预渲染，将⽣成好的 HTML ⻚⾯返回给客户端，从⽽实 现服务端渲染。

在浏览器请求关联的脚本和样式时，服务器将已经预渲染的初始化数据通过 JavaScript 传递给浏览器，然后通过 客户端渲染完成后续操作。

Nuxtjs如何请求异步接⼝数据

Nuxt2 版本是通过 @nuxtjs/axios 库来⼆次封装接⼝：https://axios.nuxtjs.org/ 但是不兼容 Nuxt3

Nuxt3提供了 useFetch 和 useAsyncData 请求接⼝，但是不⽅便⾃定义封装，这两者是通过 ohmyfetch 插件封装的 API。 因此我们可以使⽤ ohmyfetch 提供的 $fetch ⼆次封装接⼝请求

• 封装： 

import { $fetch } from 'ohmyfetch';
import type { FetchRequest, FetchOptions } from 'ohmyfetch';
// 定义全局的接⼝域名
export const baseURL = 'http://127.0.0.1:8080';
const _useApi = $fetch.create({
  baseURL: `${baseURL}`,
  // 请求拦截器
  async onRequest() {
  // 请求加token的操作
  },
  // 响应拦截器
  async onResponse() {
    // 接⼝请求异常捕获
    // 根据返回的状态码，定义错误提示
  },
});
// 导出封装的APi，加⼊参数的情况
export const useApi = async function (
  request: FetchRequest,
  options?: FetchOptions<'json'>
) {
  return await _useApi(request, options);
};

•  使用：

export const test = async (params) => {
return await useApi('/test', {
    method: 'post',
    body: params,
  });
};