一、nuxt3作用

Nuxt 基于一个强大的模块化架构，让开发变得更快、更简单。会默认优化应用程序，提高应用的性能。既支持生成静态站点、单页应用程序，也支持服务端渲染。

二、nuxt3新特性

更轻量
更快
整合vite + vue3 + composition api + ts、CLI、DevTools、Nuxt Kit

三、创建nuxt3项目

1.创建项目

使用nuxi来创建nuxt项目

npx nuxi init [project-name]

出现以下提示则为创建成功：

注意1：可能会因为网络问题连不上GitHub，会出现下图两种报错，换个网络多试几次即可~

注意2：node版本推荐14.16.0，其他版本安装完依赖开启本地服务的时候可能会报错~

2.根据提示进入项目,并安装依赖：

cd nuxt-app 
cnpm i

开启本地服务

npm run dev

页面显示如下则项目创建成功：

四、项目目录

创建好的项目目录十分简洁：

打开最眼熟的app.vue文件：

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

文件中只使用了NuxtWelcome组件，并没有看到引入的代码，查找这个组件，可以发现有个components.d.ts文件，其中引入了一些组件,这些组件便是nuxt中自动引入的组件：

再通过搜索components.d.ts文件在哪里被使用，发现 ./nuxt/nuxt.d.ts中不仅使用了components.d.ts文件，还使用了其他好几个文件：

查看.nuxt/imports.d.ts文件发现nuxt3已经引入了辅助函数、Vue Api:

export { useHead, useMeta } from '#head';
export { isVue2, isVue3 } from 'vue-demi';
export { useAsyncData, useLazyAsyncData, refreshNuxtData, defineNuxtComponent, useNuxtApp, defineNuxtPlugin, useRuntimeConfig, useState, useFetch, useLazyFetch, useCookie, useRequestHeaders, useRequestEvent, useRouter, useRoute, useActiveRoute, defineNuxtRouteMiddleware, navigateTo, abortNavigation, addRouteMiddleware, throwError, clearError, useError, defineNuxtLink } from '#app';
export { withCtx, withDirectives, withKeys, withMemo, withModifiers, withScopeId, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, computed, customRef, isProxy, isReactive, isReadonly, isRef, markRaw, proxyRefs, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect, isShallow, effect, effectScope, getCurrentScope, onScopeDispose, defineComponent, defineAsyncComponent, resolveComponent, getCurrentInstance, h, inject, nextTick, provide, useAttrs, useCssModule, useCssVars, useSlots, useTransitionState } from 'vue';
export { definePageMeta } from 'E:/study/aa/nuxt-app/node_modules/nuxt/dist/pages/runtime/composables';

总结nuxt3的自动导入：

Nuxt自动导入
- useAsyncData, useLazyAsyncData, refreshNuxtData, defineNuxtComponent, ...等方法
Vue 自动导入
- computed, customRef, isProxy, isReactive, isReadonly, isRef, markRaw, proxyRefs, reactive, readonly, ref等这些 Vue3 的相关方法
基于目录的自动导入

在项目根目录下直接创建
- components文件夹，下面的组件（.vue）会被自动导入
- composables文件夹，下面的可组合组件（.ts）会被自动导入
- assets文件夹，自动导入静态图片等资源