一、背景介绍
2022 年 11 月 16 日，全球最大的 Nuxt 会议 Nuxt Nation 2022 在线举行，并正式发布了 Nuxt.js 3.0 的第一个稳定版本。Nuxt 3 是基于 Vite、Vue3 和 Nitro 的 Nuxt 框架的现代重写，具有一流的 Typescript 支持，是两年多研究、社区反馈、创新和实验的结果。为每个人提供了一个愉快的 Vue 全栈开发体验。
因为nuxt优越的服务端渲染能力，所以对于nuxt3项目关注已久！我们开始吧！
二、官方网址
Nuxt - The Intuitive Vue Framework
https://github.com/nuxt/create-nuxt-app/blob/master/README.md
三、新特性介绍
1、更轻量：以现代浏览器为目标的服务器部署和客户端产物最多可缩小 75 倍
2、更快：基于 nitro 提供动态代码分割能力，以优化冷启动性能
3、Hybrid：增量静态生成和其他的高级功能现在都成为可能
4、Suspense：在任意组件和导航前后都可以获取数据
5、Composition API：使用 Composition API 和 Nuxt 3 的 composables 实现真正的代码复用
6、Nuxt CLI：没有任何依赖，帮你轻松搭建项目和集成模块
7、Nuxt Devtools：通过直接在浏览器中查看信息和快速修复实现更快地工作
8、Nuxt Kit：具有 Typescript 和跨版本兼容性的全新模块开发
9、Webpack 5：更快的构建时间和更小的包大小，无需配置
10、Vite：使用 Vite 作为打包工具，体验闪电般快速的 HMR
11、Vue 3：Vue 3 是你下一个 Web 应用程序的坚实基础
12、TypeScript：使用原生 TypeScript 和 ESM 构建，无需额外步骤
Nuxt 3.0 稳定版正式发布，基于 Vue 3 的 Web 框架
四、重要概念
SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。
约定式路由：不需要配置路由，在根目录pages目录下创建业务页面，即可访问。
约定式配置：如layouts布局、middleware、plugins
五、启动基础项目
https://github.com/nuxt/create-nuxt-app/blob/master/README.md
5.1、创建项目：
创建nuxt3项目：
pnpm dlx nuxi init nuxt-app
npx nuxi init nuxt3-app
5.2、安装依赖
pnpm install --shamefully-hoist
5.3、启动项目
启动成功
六、项目配置、基础使用
6.1、访问pages/index.vue
根目录app.vue，<NuxtWelcome />替换为：<NuxtPage/>
<template> <NuxtPage/> <!-- <div> <NuxtWelcome /> </div> --> </template>
pages/index.vue
<template> <div> <h1>snow</h1> </div> </template> <script setup lang="ts"> </script> <style scoped> </style>
pages/about.vue
<template> <div> <h1>about</h1> </div> </template> <script setup lang="ts"> </script> <style scoped> </style>
这样就可以访问页面了：
6.2、动态路由
6.2.1、目录结构
6.2.2、访问：/user
如果没有pages/user/index页面，只有[id].vue，访问的时候式404页面
6.2.3、访问：/user/1，动态路由，获取动态路由参数
{{$route.params.id}}
6.2.4、访问：/user/1?name=snow，动态路由，获取路由普通参数：
{{$route.query.name}}
6.2.5、通过useRoute()获取路由信息
const route = useRoute()
<template> <div> <h1>user-id:{{$route.params.id}}</h1> <h1>user-name:{{$route.query.name}}</h1> </div> </template> <script setup lang="ts"> const route = useRoute() console.log(route.params, route.query) </script> <style scoped> </style>
6.3、路由跳转
经过测试一下几种方式均成功跳转。页面内容均正常展示。
6.3.1、
<NuxtLink to="/user/1">user-id</NuxtLink>
6.3.2、
<a href="/user/2">user-id-2</a>
6.3.3、
<NuxtLink :to="{ path: `/user/${3}`}">user-id-3</NuxtLink>
6.3.4、编程式路由
<script setup lang="ts"> function toUser() { navigateTo({ path: '/user/4', query: { name: 'snow' } }) } </script>
6.4、加载静态资源
<div> <img src="~/assets/nginx.jpg" alt="nginx"> <img src="~/public/nginx.jpg" alt="nginx"> </div>
nuxt项目tsconfig.json有配置，public目录下的文件可以省略/public目录，我这里测试不可以，后续会再研究
已测试成功，可以省略 “~/public” 目录
6.5、设置页面title，不会在页面展示，只会在页面title部分展示
6.5.1、
<Title>snow-title</Title>
<template> <Title>snow-title</Title> </template> <script setup lang="ts"> </script> <style scoped> </style>
如图：
ctrl + u：
6.5.2、使用useHead()方法
useHead({ title: 'snow-title-2' })
设置成功，useHead优先级小于<Title>标签。
6.5.3、同理使用useHead设置页面的TDK信息
<script setup lang="ts"> useHead({ title: 'snow-title-2', meta: [ { name: 'description', content: 'snow-desc'}, { name: 'keywords', content: 'snow-kw'} ] }) </script>
