初识 Nuxt3

2022 年 5 月 17 日 星期二(已编辑)
/ , ,
772
这篇文章上次修改于 2022 年 8 月 24 日 星期三，可能部分内容已经不适用，如有疑问可询问作者。

初识 Nuxt3

早在去年 Vue3 的正式版就发布了，但其周边生态的跟进却较为缓慢，当我们有 SSR 的需求时，可能会去选择 react 的 nextjs 来完成。但最近 Nuxt3 进入了 rc.3 版本了，据官方所说在 6 月份就要发布稳定版了，也是时候该去学习下了。其实早在 1 个月前的 beta版本我就接触过了，只不过启动报错直接劝退，看来现在已经修复了那个 bug。

CSR 与 SSR

那么客户端渲染 CSR 与 服务端渲染 SSR 有什么区别呢？

CSR

我们平日里用写的 Vue 项目，一般在打包后会生成 dist 文件夹，里面会有只有一个标签 <div id="app"></div>的index.html文件和压缩后的 js css 文件，这就是 CSR 应用。

当用户访问网页时，服务器会返回这 index.html 文件，接着用户浏览器会解析这个 index.html 文件，当解析到 script引用时，会再向服务器请求这个 js 文件，接着再进行渲染，但这个过程会出现短暂的白屏和无法进行SEO优化的问题。

SSR

当用户访问网页时，服务器会返回一个填充满数据的 index.html 文件，然后浏览器直接进行进行渲染，而之前请求 js 文件的那个过程，就由服务端替浏览器完成了。这样就可以做到较好的 SEO 效果，但缺点也显而易见，就是服务端的压力会增加。我们今天讲述的 Nuxtjs 就是采用 SSR服务端渲染 来实现的。

自动引入

我们刚创建完 nuxt3 项目后，点开 App.vue 往往会很懵逼

<template>
  <div>
    <NuxtWelcome/>
  </div>
</template>
  • <NuxtWelcome/>是什么？
  • 为什么没有使用任何 import 却能直接使用？

我们可以点开node_modules 开看看

image-20220517231204287
image-20220517231204287

发现 nuxt3 那些炫酷的 ui 都整整齐齐放在 ui-templates这个文件夹里

可以得出结论 nuxt3 拥有自动引入机制（具体实现我并不了解）

它会在如下情况下生效 (目前 webstorm 对其支持不是很友好，会爆红)

composables 目录下

// composables/useCount.ts
export const useCount = 100
<script setup lang="ts">
// useCount 将被按需自动引入
console.log(useCount) 
</script>

components 目录下的组件

//components/card.vue
<template>
  <div>我是card</div>
</template>
//pages/index.vue
<template>
  <card/>
</template>

内置api

<script setup lang="ts">
// ref 将被按需自动引入
const counter = ref(0)
</script>

路由

Nuxt3 无需单独配置路由， 会默认使用根目录的 pages 文件夹作为路由，这与 nextjs 是一样的。

调整pages目录，创建如下文件，并修改 app.vue的 <NuxtWelcome/>为<NuxtPage/>（目前 nuxt3 有个 bug，就是新建pages文件后，必须重启，否则无法被nuxt 识别，会报 404 错误，估计以后会修复 ）

image-20220517193910914
image-20220517193910914
// index.vue
<template>
  <div>我是根路由</div>
</template>
// [id].vue
<template>
  <div>
    用户编号为: {{ $route.params.id }}
  </div>
</template>

运行程序可以看到如下界面

image-20220517194433544
image-20220517194433544

我们可以看到根路由默认读取了pages/index.vue这个文件

接着我们访问 http://localhost:3000/user/123，我们看到可以使用[id]来设置动态路由的参数（注意这个[id]并非是固定的，你也可以设置为[name]，只要修改$route.params.name即可）

image-20220517194627099
image-20220517194627099

数据获取

​ 作为 SSR 框架数据获取可以说是最重要的内容之一了，nuxt3 中内置了以下四种请求的方法且都支持自动引入

  • useFetch
  • useLazyFetch
  • useAsyncData
  • useLazyAsyncData

有 lazy 就是懒加载，否则会阻塞导航的跳转

useLazyAsyncData

const { data, pending, error, refresh } = useAsyncData('mountains', () => $fetch('https://api.nuxtjs.dev/mountains'))

console.log(data.value)
image-20220517203831681
image-20220517203831681

这个key需要手动设置个唯一键。

很明显它返回的是一个 ref 类型，我们通过.value获取即可

useLazyFetch

const { data, pending, error, refresh } = useLazyFetch('https://api.nuxtjs.dev/mountains')

console.log(data.value)

效果是一样的，但无需指定 key，其由 nuxt3 生成，但没有useLazyAsyncData灵活

补充：关于导入TailwindCSS

目前TailWindCss官网只有 nuxt2 的配置，因此这里补充下 nuxt3 的，修改 nuxt.config.ts 如下,其余的配置与 tainwindcss官网一致

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: ["~/assets/css/tailwind.css"],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    }
})
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...