一、# Assets

对于Assets具有两种存储方式

1. public/存储在root下
2. assets/通过Vite 或 Webpack进行处理

Public下的文件是暴露的我们可以直接访问

<img src="/329.png" />
//也可以通过http://localhost:3000/329.png(直接访问静态资源)

Assets在使用Assets/需要vite或webpack的配合，会对文件做一个缓存处理，但是并不会被扫描不会暴露，需要启动服务的静态资源才可以被外部直接访问，不能http://localhost:3000/329.png 访问

我们可以这样访问

 <img src="~/assets/img/329.png" />

当然我们可以配置一下路径

 <img src="@/assets/img/329.png" />

我们尝试创建引入SVG，使用Icônes (icones.js.org)

复制一个Vue的配置，我们在Compoments创建icons文件夹创建一个svg的vue文件，当作组件在别的地方引入尝试一下。

二、composables

在根目录下创建一个composables，我们可以写一些公用的工具方法，我们使用

//export 进行暴露
export const logmessage = () => {
  const loghello = () => {
    console.log("hello");
  };
  return loghello;
};

被暴露的方法会自动在js，ts，vue文件引入，我们使用时候可以直接使用

<script setup>
    const showmessage = logmessage();
    showmessage();
</script>

当然也可以使用VueuseGet Started | VueUse

三、plugins文件夹

Nuxt会自动读取你的插件目录中的文件，并在创建Vue应用程序时加载它们。你可以在文件名中使用.server或.client后缀，以便只在服务器或客户端加载一个插件。

使用provide(官方例子)

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

我们尝试去打印一下看看里面有什么

我们会看到

所以我们可以解构出来使用

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>

四、middleware

middleware是一个route middleware一个可定制的对路由操控的方式

根目录创建middleware文件夹，文件夹下创建文件，（.global后缀的文件进行全局应用）

//auth.global.ts 这个文件的路由被全局应用
export default defineNuxtRouteMiddleware((to, from) => {
  console.log("to",to,'from',from);
});

//auth.ts 我们在这里定义一个判断的路由（可以用于用户判断类的操作）
export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === "1") {
    return navigateTo("/");
  }
});

我们定义一个definePageMeta({middleware: ["auth"]})用于指定middleware/auth.ts文件路由

// pages/login/[id].vue文件
<script setup>
const route = useRoute();
console.log(route);
definePageMeta({
  middleware: ["auth"],
});
</script>
<template>
  <div>this route {{ $route.params.id }}</div>
</template>
//当我们http://localhost:3000/login/1 将被 navigateTo("/")

中间件按以下顺序运行：
全局中间件
页面定义的中间件顺序（如果有多个中间件用数组语法声明）

当我们在组件使用

<script setup>
definePageMeta({
  middleware: [
    function (to, from) {
      // Custom inline middleware
    },
    'auth',
  ],
});
</script>

执行顺序会如下 You can expect the middleware to be run in the following order:

1. analytics.global.ts
2. setup.global.ts
3. Custom inline middleware
4. auth.ts