2024-04-25Vue6 分钟读完 (大约 830 个字)

Nuxt.js开发笔记

Nuxt.js是基于vue的一个全栈（这里全栈的意思是支持CSR和SSR）开发框架或者说开发套件，支持SSR（服务端渲染）、SSG（静态站点生成）、SPA（单页面应用），它提供了vue不提供的路由、缓存、接口服务、SSR，并对开发场景做了大量优化，开箱即用。

初始化项目

bash

1	npx create-nuxt-app my-app

FileBased（文件即路由）

只需要在pages下创建vue文件，即可访问，Nuxt.js会自动根据文件名注册路由。还支持路由嵌套、路由参数。

SSR

vue项目都是在客户端渲染的，导致我们的页面不能完整的被搜索引擎爬取收录，这个时候就可以搭建服务端渲染（SSR）来解决这个问题。

SEO

在Nuxt.js中实现SEO只需要使用Nuxt.js提供的SEO接口：

vue

<template>
    <div></div>
</template>

<script lang="ts" setup>
useSeoMeta({
    title: '电商',
    description: '描述',
})
</script>

服务端渲染接口数据

$fetch

Nuxt.js内置了$fetch，可以代替axios。

useAsyncData

useAsyncData是用于获取接口数据的方法，需要结合$fetch使用。

vue

<template>
    <div></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

useSeoMeta({
    title: '电商',
    description: '描述',
})

const list = ref([])

const { data } = await useAsyncData(
  'id', // 需要给定唯一的id
  () =>
    $fetch('https://xxx.xxx.com', {
      headers: {
        // ...
      }
    }),
  {
    pick: ['data'], // 选择返回对象中想要的属性
    // lazy: false, // 这里默认为false 会阻塞路由渲染，（一定要等到数据请求回来后才会跳转路由）
    lazy: true // 不会阻塞路由跳转，但是会导致跳转后无数据，需要通过watch监听数据后赋值
  }
)

list.value = data.value
watch(data, () => {
    list.value = data.value
})
</script>

如果对于获取的数据不需要处理，则无需监听可以在获取到data后直接渲染到页面上。

这样就可以像CSR一样使用data来渲染页面了。

此时接口的数据是在服务端完成的渲染，这样对于SEO友好，并且可以解决首屏加载慢的问题，因为页面都已经在服务端渲染好了。

useFetch

useFetch是useAsyncData的语法糖，它不需要传入id。

vue

<template>
    <div></div>
</template>

<script lang="ts" setup>
useSeoMeta({
    title: '电商',
    description: '描述',
})

const { data } = await useFetch(
    'https://a.com/xxx',
    {
        headers: {
            // ...
        },
        transform: res => res.data.list, // 选择返回对象中想要的属性
        lazy: true,
    },
)
</script>

useLazyFetch

useLazyFetch是lazy为true的useFetch。

服务端接口

Nuxt.js还可以写自己的服务端接口。

比如在server目录下创建api目录，目录下创建接口文件，可以直接读取数据库。实现了一个真实的api接口。

组件自动导入

Nuxt.js中如果要使用一个组件，不需要再导入这个组件了，可以直接使用。

中间件

Nuxt.js可以使用中间件（middleware）来实现比如鉴权等功能。

创建中间件
在具体页面组件中使用中间件。

vue

<template>
    <div></div>
</template>

<script lang="ts" setup>
definePageMeta({
    middleware: 'middlewareName',
})

useSeoMeta({
    title: '电商',
    description: '描述',
})

const { data } = await useFetch('https://a.com/xxx')
</script>