一、背景介绍

2022 年 11 月 16 日，全球最大的 Nuxt 会议 Nuxt Nation 2022 在线举行，并正式发布了 Nuxt.js 3.0 的第一个稳定版本。Nuxt 3 是基于 Vite、Vue3 和 Nitro 的 Nuxt 框架的现代重写，具有一流的 Typescript 支持，是两年多研究、社区反馈、创新和实验的结果。为每个人提供了一个愉快的 Vue 全栈开发体验。

因为nuxt优越的服务端渲染能力，所以对于nuxt3项目关注已久！我们开始吧！

二、官方网址

Nuxt 3 - 中文文档

Nuxt - The Intuitive Vue Framework

Announcing 3.0 · Nuxt

Nuxt - Installation

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，替换为：

pages/index.vue

pages/about.vue  

这样就可以访问页面了：

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()

6.3、路由跳转

经过测试一下几种方式均成功跳转。页面内容均正常展示。

6.3.1、

user-id

6.3.2、 

user-id-2

6.3.3、

user-id-3

6.3.4、编程式路由

6.4、加载静态资源

 nuxt项目tsconfig.json有配置，public目录下的文件可以省略/public目录，我这里测试不可以，后续会再研究

6.5、设置页面title，不会在页面展示，只会在页面title部分展示

6.5.1、

如图：

 ctrl + u：

 6.5.2、使用useHead()方法

useHead({title: 'snow-title-2'
})

设置成功，useHead优先级小于