默认资源目录
在 Nuxt.js 中，资源文件包括样式表、字体、图片、视频、音频等文件都可以放在 public 目录下。当应用启动时，Nuxt.js 会将 public 目录下的所有文件复制到应用的根目录下，这样这些文件就可以像其他资源文件一样被引用了。同时，public 目录下的文件请求路径为 /，不需要加上目录名。
除了 public 目录，Nuxt.js 还提供了一个特殊的目录 assets，这个目录用来存放应用的公共资源，比如样式表、JavaScript 代码、图标等文件。与 public 目录不同的是，assets 目录下的资源都会被自动处理（如 SCSS 文件会被自动编译成 CSS 文件），并且可以使用 ~ 和 @ 等别名（alias）。
例如，在 nuxt.config.js 文件中可以配置 alias 别名：
alias: {'@': '/public/static'},
这样，在应用中可以使用 @ 别名来引用 /public/static 目录下的文件，例如：
<template><div class="logo"><img src="@/logo.png" alt="My Logo"></div>
</template><style scoped>
.logo {background-image: url('@/logo.png');
}
</style>
通过使用别名，我们可以在应用中更方便地引用资源文件，同时还可以使用 SCSS 预处理器等工具来自动处理样式表。
配置全局样式
1、配置文件 nuxt.config.ts
export default defineNuxtConfig({css: ['assets/global.css']
})2、创建global.css，然后在app.vue中引入
使用 CSS 预处理器：Less
yarn add less -D 修改配置文件
export default defineNuxtConfig({css: ['assets/global.scss']
})如果想在 pages 和 components 里面使用 less 变量，则需要配置全局样式导入。
首先创建 assets/variable.less，写入变量。然后添加一个 vite 配置，nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({vite: {css: {preprocessorOptions: {less: {additionalData: '@import "~/assets/variable.less";',}}}}
});组件自动导入
Nuxt.js 3 中引入了自动导入（Automatic Imports）的功能，可以帮助我们更方便地管理应用中的组件、路由、中间件等，减少手动导入的代码量，提高开发效率。
自动导入功能的实现依赖于 Webpack v5.x 的新特性 Module Federation（模块联邦），这个特性可以让不同的应用之间共享代码或资源文件。在 Nuxt.js 中，我们可以将应用中的组件、路由等模块导出，然后在其他应用中自动导入。
在 Nuxt.js 3 中，自动导入功能主要用于以下几个方面：
-
自动导入组件：可以将应用中的组件自动导入到模板中，不需要手动导入。
-
自动导入路由：可以将应用中的路由自动导入到路由配置中，不需要手动配置。
-
自动导入中间件：可以将应用中的中间件自动导入到路由中间件配置中，不需要手动配置。
Nuxt 中约定把组件放在components/目录中，这些组件只要被用在页面或其他组件中，就会自动导入并注册。
Nuxt 自动导入：数据访问 useFetch、状态管理 useState、App 上下文 useNuxtApp、运行时配置 useRuntimeConfig 等。
Vue自动导入：ref、reactive、computed 等。
基于路径自动导入：
组件目录：/components ；
hooks目录：/composables ；
工具库目录：/utils 。
如果存在嵌套关系，那么组件名称将会基于路径和文件名以大驼峰方式连起来，比如上面的base/foo/Button.vue注册名称将会是BaseFooButton，用起来将会像下面这样：
| components/
--| base/
----| foo/
------| Button.vue<BaseFooButton />可以通过设置 nuxt.config.ts 中 imports 选项自定义扫描目录
export default defineNuxtConfig({imports: {dirs: [// 扫描顶层目录中模块'composables',// 扫描内嵌一层深度的模块，指定特定文件名和后缀名'composables/*/index.{ts,js,mjs,mts}',// 扫描给定目录中所有模块'composables/**']}
})
