初识 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](https://suemor.oss-cn-beijing.aliyuncs.com/img/image-20220517231204287.png)
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](https://suemor.oss-cn-beijing.aliyuncs.com/img/image-20220517193910914.png)
image-20220517193910914
// index.vue
<template>
<div>我是根路由</div>
</template>
// [id].vue
<template>
<div>
用户编号为: {{ $route.params.id }}
</div>
</template>
运行程序可以看到如下界面
![image-20220517194433544](https://suemor.oss-cn-beijing.aliyuncs.com/img/image-20220517194433544.png)
image-20220517194433544
我们可以看到根路由默认读取了pages/index.vue
这个文件
接着我们访问 http://localhost:3000/user/123
,我们看到可以使用[id]
来设置动态路由的参数(注意这个[id]
并非是固定的,你也可以设置为[name]
,只要修改$route.params.name
即可)
![image-20220517194627099](https://suemor.oss-cn-beijing.aliyuncs.com/img/image-20220517194627099.png)
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](https://suemor.oss-cn-beijing.aliyuncs.com/img/image-20220517203831681.png)
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: {},
},
},
},
}
})