Nuxt3学习总结（02）

默认资源目录

在 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 目录下的文件，例如：

通过使用别名，我们可以在应用中更方便地引用资源文件，同时还可以使用 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 中，自动导入功能主要用于以下几个方面：

1. 自动导入组件：可以将应用中的组件自动导入到模板中，不需要手动导入。

2. 自动导入路由：可以将应用中的路由自动导入到路由配置中，不需要手动配置。

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

可以通过设置 nuxt.config.ts 中 imports 选项自定义扫描目录

export default defineNuxtConfig({
  imports: {
    dirs: [
      // 扫描顶层目录中模块
      'composables',
      // 扫描内嵌一层深度的模块，指定特定文件名和后缀名
      'composables/*/index.{ts,js,mjs,mts}',
      // 扫描给定目录中所有模块
      'composables/**'
    ]
  }
})