前言
从Nuxt2.x开始在技术选型中使用该框架构建项目，当初的主要考量是产品SEO优化及浏览器收录，而Nuxt则是vue服务端项目渲染的一款开箱即用的框架。
项目开始这一路走来，遇到的坑非常的多。不过相对于的技术收获也是很大的，因为我们不得不在这趟旅程中，接触许多平常未曾涉及的知识体系。
然而在如今的企业项目开发中，对服务端渲染的要求日益突出，随着Nuxt3的推出，本着少走弯路，不拘束于文档可以快速开发的理念，接下来，笔者也将用通俗易懂的文字和图片，带你进入 Nuxt3 的世界。对Nuxt3项目从零到实战做一个全方位梳理、解读!
本系列文档采用实战化项目和碎片化知识点记忆的方式贯穿整个Nuxt3框架 始终，带你惬意玩转 Nuxt3。学习成果的输出，由于精力和水平有限，难免有错漏，欢迎大家指正！
一、什么是Nuxt3?
1、对于刚接触Nuxt的小伙伴可能并不了解Nuxt框架及作用,Nuxt3相比Nuxt2又做出了哪些改变。
2016 年 10 月 25 日，zeit.co背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。
2、Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。
二、如何创建nuxt3项目
1、打开一个终端，使用以下命令创建一个新的启动项目
//nuxt-app 是我们的项目名称，可自行命名
1、npx nuxi init nuxt-app
2、yarn install
3、yarn dev or npm run dev
如图：
2、我们打开开发工具预览一下我们创建的项目结构及运行效果： 如图：
三、通过预览项目结构我们发现创建的项目就够十分简单，它只是一个极其简单的项目，因此我们需要对它进行改造、丰富，使其成为一个完整的项目开发结构，符合我们开发的需要。
1、重构我们的项目结构
项目文件划分：
根目录创建assets文件存放我们的静态资源文件。例如：css、images、js
根目录创建components文件存放我们的组件
根目录创建layouts存放我们的整体布局文件。例如：头部、底部、主题body
根目录创建plugins存放我们的插件
根目录创建utils存放我们的自定义js 或 ts 文件
根目录创建pages文件存放我们的页面
如图：
到目前为止开发工作已准备就绪，接下来就是我们的开发实战阶段，我们的 布局组件 layouts
四、一看就懂的 layouts 布局组件
1、首先找到我们项目的layouts目录，创建我们的布局组件，默认 default.vue ，完成我们UI布局三要素：头部、主题和底部
/*
* 佛曰:
* 写字楼里写字间，写字间里程序员；
* 程序人员写程序，又拿程序换酒钱。
* 酒醒只在网上坐，酒醉还来网下眠；
* 酒醉酒醒日复日，网上网下年复年。
* 但愿老死电脑间，不愿鞠躬老板前；
* 奔驰宝马贵者趣，公交自行程序员。
* 别人笑我忒疯癫，我笑自己命太贱；
* 不见满街漂亮妹，哪个归得程序员？
*
* @Description: 布局组件
* @version:1.2.0
* @Date: 2022-09-12 09:25:54
* @Author: wenBin
*/
<template>
<!-- 头部 -->
<div>
<h3 style="color:#fff;display: block;text-align: center">我是头部</h3>
</div>
<!-- 主题内内容-->
<div>
<!-- 使用插槽-->
<slot />
</div>
<!-- 底部-->
<div>
<h3 style="color:#fff;display: block;text-align: center">我是底部</h3>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
2、接下来我们来创建我们的项目首页。在pages创建index.vue
<---这是我们的首页---->
<template>
<h3>你好</h3>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
3、接下来我们来运行，如图：
我们发现并不是我们想要的结果，看给我们的提示要我们找到 app.vue 移除 <NuxtWelcome /> ，因此我们需要对 app.vue 稍做修改。如下：
//修改之前
<template>
<div>
<NuxtWelcome />
</div>
</template>
//修改之后
<template>
<main>
<NuxtPage />
</main>
</template>
<style lang="scss">
</style>
我们再次运行看效果，如图：
我们发现页面运行只展示出来了 你好，我是 pages 下的index.vue,此时的效果也不是我们想要的，那么，布局组件要如何才能被引入到页面呢。此时 <NuxtLayout>就要出场了，我们需要对index.vue页面也进行相应改造，代码如下：
/* _oo0oo_
* o8888888o
* 88" . "88
* (| -_- |)
* 0\ = /0
* ___/`---'\___
* .' \\| |// '.
* / \\||| : |||// \
* / _||||| -:- |||||- \
* | | \\\ - /// | |
* | \_| ''\---/'' |_/ |
* \ .-\__ '-' ___/-. /
* ___'. .' /--.--\ `. .'___
* ."" '< `.___\_<|>_/___.' >' "".
* | | : `- \`.;`\ _ /`;.`/ - ` : | |
* \ \ `_. \_ __\ /__ _/ .-` / /
* =====`-.____`.___ \_____/___.-`___.-'=====
* `=---='
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* 佛祖保佑 永不宕机 永无BUG
* @Description: 首页
* @version:1.2.0
* @Date: 2022-09-12 09:25:54
* @Author: wenBin
*/
<template>
<NuxtLayout>
<h3>你好，我是 pages 下的index.vue</h3>
</NuxtLayout>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
此时在运行效果图如下：
眼前瞬间一亮。我们的布局组件引入成功了，是不是需要给自己点小鼓励，哈哈。
⚠️注意：我们的布局组件 layouts 默认是 default.vue ,说明还有不是默认的时候，即我们还可以自定义布局组件，例如某个页面我需要跳转到某个特定布局例如 userCenter.vue ,那么我们要怎么做呢？具体如下： 在 layouts下创建布局组件 userCenter.vue 在我们对应的页面引入布局组件
//注意 name不写加载我们的默认布局 default.vue
<NuxtLayout name="userCenter"> home </NuxtLayout>
到目前为止，我们的 layouts 布局组件就告一段落
五、nuxt.config.ts nuxt项目的配置文件
我们的所有配置可以放在 defineNuxtConfig ，例如：
ssr: true,//是否服务端渲染
css: [],//全局样式
app:{
head:{
title: 'Nuxt 3 实战项目',
titleTemplate: '%s - Nuxt 3 实战项目',
meta:[
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'Nuxt 3 实战项目',
}
],
link:[
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }///logo
]
}
},
plugins:[]//插件全局注入，Nuxt3提供了自动注入插件功能，可不在此填写
components: true,
modules:[],
experimental:{
reactivityTransform: true,
},
//等等大家可以根据需要配置
⚠️注意：这里敲一下黑板，考虑到 Nuxt3 使用到了 vue3 和 ts,接下来我们简单过一下 typeScript 和 vue3 , 然后继续完善我们的 Nuxt3 项目
