Nuxt3 踩坑笔记
最近搞导师那边的项目，但由于学长那边传承下来的项目太臃肿了（因为那个学长也是从别的项目改过来的。。。），改起来很不方便，而且性能也跟不太上了，因此我打算重头自己写一个
最后研究了一下决定采用 Vue3 + Vite + Pinia + ts + Nuxt3 的方案，这是因为这项目原本就是 Vue2 的项目，正好现在 Vue3 也很成熟了，就干脆直接换成了 Vue3 ，然后寻找 Vue3 的最佳实践就有了 Vite、Pinia和 ts，至于 Nuxt3 是因为想尝试一下服务端渲染，但 Nodejs 我不太熟，加上 Vue3 的 SSR 网上相关教程很少，因此最后还是决定采用 Nuxt3，不过这玩意儿正式版是一个月前才发布的，网上教程也很少，而且官方文档似乎也还是在完善中，因此坑有点多。。。
为了方便，我从一个模板来开始构建，我选择的是 antfu/vitesse-nuxt3: Vitesse for Nuxt 3 🏔💚⚡️ (github.com)，vitesse 是我比较下来我认为最接近我理想中的最佳实践的模板，而且还刚好有 Nuxt3 版本的，而且作者 Anthony Fu 是 Vue, Vite, Nuxt 核心团队成员，同时也是 VueUse, Vitest 等官方生态工具的作者，这份模板的质量应该还是有保证的
安装
安装我是直接用模板仓库创建了一个新的仓库，直接 clone 下来的
然后只需要 pnpm i 安装依赖包就行了
运行的时候就出现了一些奇怪的地方
根据官方文档，应该用 pnpm run dev -- -o 启动
但我这边不知道为什么，这么启动的话，会在项目根目录创建-o/.nuxt 目录，这显然是不正常的， -o 不知道为什么被当作了一个文件目录名，而不是一个参数，改用 pnpm run dev -o 后才会正常生成.nuxt 目录并自动打开浏览器窗口
另外一个坑就是，在 windows 下，如果开启了 vitenode 功能，就会因为路径导致请求失败
该 bug 已经修复完毕，只不过还没有发布到新的包里，因此 windows 下只能暂时关闭这个功能，修改 nuxt.config.ts ，另外就是默认启动是，会总是有选项来问你，是否愿意让它收集你的数据来进行遥测，就很烦，可以设置 telemetry 为 false 来关闭
export default defineNuxtConfig({
experimental: {
viteNode: false,
},
telemetry: false,
})
导入 UI 库
这又是一波血坑，因为想换个 UI 库，加上 element plus 似乎 bug 也不少，因此选择了 尤大曾经推荐过的 Naive UI，不过因为这个 UI 库的实现方式似乎和其他主流的有所不同，加上相对大厂的 UI 库更冷门，似乎坑也不少
首先参考文档安装 naive-ui 和 @css-render/vue3-ssr，然后按照官方的例子，修改配置文件，添加插件，不过这样没法使用到 nuxt 的自动导入功能，因此如果想实现自动导入，需要安装 unplugin-vue-components 这个 Vite 插件来实现
并修改配置文件
import { defineNuxtConfig } from 'nuxt'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
export default defineNuxtConfig({
modules: [
'@vueuse/nuxt',
'@unocss/nuxt',
'@pinia/nuxt',
'@nuxtjs/color-mode',
],
experimental: {
reactivityTransform: true,
viteNode: false,
},
unocss: {
preflight: true,
},
colorMode: {
classSuffix: '',
},
vite: {
plugins: [
AutoImport({
resolvers: [NaiveUiResolver()],// 此处没有效果，官方没提供函数导出的接口，可以删了
}),
Components({
resolvers: [NaiveUiResolver()], // Automatically register all components in the `components` directory
}),
],
},
build: {
transpile: [
'naive-ui',
'vueuc',
'@css-render/vue3-ssr',
'@juggle/resize-observer',
],
},
})
刷新数据
在做验证码点击刷新这个功能时，发现直接再次调用 useFetch 去发请求的话，虽然请求正常的发送了，但页面并没有响应式的变化，后来网上查了半天，也没找到相关的资料，最后是翻了半天官方文档才发现，是需要调用第一次 useFetch 返回的一个 refresh 函数来再次获取数据，下面是官方文档原文
Sometimes throughout the course of your user's page visit, you may need to refresh the data loaded from the API. This can happen if the user chooses to paginate, filter results, search, etc.
You can make use of the refresh() method returned from the useFetch() composable to refresh the data with different query parameters:
<script setup>
const page = ref(1);
const { data: users, pending, refresh, error } = await useFetch(() => `users?page=${page.value}&take=6`, { baseURL: config.API_BASE_URL }
);
function previous(){
page.value--;
refresh();
}
function next() {
page.value++;
refresh();
}
</script>
The key to making this work is to call the refresh() method returned from the useFetch() composable when a query parameter has changed.
OωO
