Nuxt 3 Beta于10月12日首次亮相，我非常高兴能给轮胎一个良好的展现并试驾。这里概述了一些很酷的新特性，以及我发现的一些怪异现象。
开始使用
要开始使用Nuxt 3，你要使用新的Nuxt CLI工具nuxi。
npx nuxi init [project-name]
这将创建一个比你在Nuxt 2中可能习惯的更原始的项目。
许多你在Nuxt 2中使用的目录仍然被支持，但你可以只建立你自己需要的目录。
快速启动
在运行npm install ，你可以运行npm run dev 来启动开发环境。
在这个步骤中，真正让我印象深刻的是应用程序的启动速度。希望Nuxt 2在终端的小进度条的日子已经过去了。
页面和app.vue
没有页面目录，Nuxt就不包括Vue Router。这为你不需要Vue Router时减轻了最后的捆绑。一旦你添加了pages目录，Vue Router就被包含了，而且你的路由会根据文件结构自动创建给你。
在这一点上，/app.vue 文件似乎是可选的。如果你删除它，你的页面组件将表现得很好。但如果你保留它，你需要确定并使用<NuxtPage/> 组件来插入适当的页面组件。(我觉得有点像<router-view> 。)
// App.vue
<template>
<div>
<NuxtPage />
</div>
</template>
关于app.vue ，最酷的是它将成为所有页面甚至所有布局的父组件。因此，如果你想让任何东西显示在你的网站的所有页面上，甚至跨布局，你可以把它添加到app.vue
// app.vue
<template>
<div>
<div>I'm on literally every single page</div>
<NuxtPage />
</div>
</template>
这意味着你可以在这里导入全局样式，如果它适合你的喜好（或者你可以继续在nuxt config中做）。
// app.vue
<script>
import '/assets/style.css'
</script>
动态路由
在Nuxt 3中用动态路由命名页面文件也有点不同。在Nuxt 3中，你不再使用下划线，而是使用方括号。
//Nuxt 2
_id.vue
// Nuxt 3
[id].vue
虽然稍显冗长，但它带来的好处是可以将可变文本与静态文本结合在一块的路径中。
// File: team-[name].vue
// Route: /team-tigers
// $route.params.name === tigers
你还可以使用动态参数作为目录名。
// File: team/[name]/player/[id].vue
// Route: /team/tigers/player/2
// $route.params.name === tigers
// $route.params.id === 2
最后一个超酷的功能是能够通过在文件名中散布动态参数来制作一个全面的路径。
// File: [...slug].vue
// Route: /some/random/route
//$route.params.catchAll === ['some', 'random', 'route']
我能够利用这一点来制作一个超级简单的404页面。
// [...404].vue
<template>
<div>404 - Page Not Found</div>
</template>
API路由
Nuxt 3的下一个非常棒的功能是能够根据server/api 目录中存在的文件来提供特设的api端点。说实话，这感觉很像无服务器函数，让人耳目一新。
你可以返回一个字符串或任何能够被序列化为JSON的JavaScript数据类型。
// server/api/hello.ts
export default (req, res) => {
return {
msg: 'Hello World'
}
}
现在向/api/hello 发出请求，将返回JSON与消息。
你可以把这个和Nuxt 3的useFetch 功能结合起来，从服务器上提供你的应用数据。
<script setup>
const { data } = await useFetch(
// api endpoint
'/api/hello',
// options
{
method: 'GET'
params: {},
baseURL: '',
// limit data stored in the page payload
pick:[],
// fetch data on server side (default true)
server: true,
// load the route before resolving the async function (default false)
defer: true,
// transform the data
transform: value => value
})
</script>
Netlify上的无服务器SSR
当谈到部署Nuxt 3的应用程序时，我有一瞬间的迷茫。我是一个典型的Nuxt用户，但Nuxt 3还没有SSG的功能。
不过最酷的是，我仍然可以使用我最喜欢的主机提供商Netlify，但不是把Nuxt作为SSG，而是把它部署成一个在无服务器环境中运行的SSR应用程序......而且，我可以得到这个：绝对没有配置！这真是太神奇了。这真是太棒了!
在无服务器环境中以SSR的形式运行，使其几乎和SSG一样快（尽管还不够），这意味着构建时间可以快很多。我的小测试网站只用了24秒就完成了几个页面的构建。
商店
在这一点上，Nuxt 3似乎不支持Vuex的开箱。在像Nuxt 2那样用index.js文件添加store目录后，当我试图访问页面上的状态时，得到了以下错误。
TypeError: can't access property "state", _ctx.$store is undefined
相反，有一个useState 函数，可以在页面、组件和插件中使用，以获得和设置全局状态。
// plugins/locale.server.ts
import { defineNuxtPlugin, useState } from '#app'
export default defineNuxtPlugin((nuxt) => {
const locale = useState(
'locale',
() => nuxt.ssrContext.req.headers['accept-language']?.split(',')[0]
)
})
// MyPage.vue
<script setup>
const locale = useState('locale')
</script>
<template>
Current locale: {{ locale }}
</template>
其他有趣的小插曲
在这一过程中，我还遇到了一些其他有趣的小插曲，值得简单一提。
- Nuxt 3使用
@vueuse/head来管理文档<head>，而不是vue-meta。 - 类型化的工作!😎
- 布局的工作原理基本相同，另外还使用了一些额外的灵活的范围槽
- 插件（在plugins目录下）会自动加载
几个小问题
最后，对于一个测试版来说，我真的很惊讶，因为很少出错。尽管如此，还是有几件事情让我头疼。
在添加或删除页面组件文件时，我不得不重新启动开发服务器，以使更改生效，这比我希望的要多。
另外，DevTools一开始对我不起作用，但我用的是Firefox，所以我不得不从repo中重新下载Vue Devtools测试版，然后就可以使用了。这可能是我的问题，但我想我应该提到它，以防你们中的任何一个人有同样的经历。
结论
总而言之，我对Nuxt 3的可能性感到非常兴奋，我真的很享受在车轮后面，把测试版通过它的步伐。你呢？你玩过Nuxt 3了吗？你对它有什么看法？
如果你还没有玩过，那就去看看新的文档，看看你怎么想的。
