一般来说，在Vue2/3的项目中我们是直接什么公开文件都往Assets文件夹里塞，而public文件夹则放置我们的index.html以及.ico文件。在Nuxt3中 这两个文件的路径存放有着很大的区别

1. 按官方文档 

• Stylesheets (CSS, SASS, etc.)

• Fonts

• Images 它不会从public/目录中提供。 

推荐我们放置 CSS JS Fonts等资源文件，而public则可以放置img html等公开的文件

两者的区别在于 最终的文件读取url上，存放在assets文件夹里的文件不会被url所识别，而放置在public文件夹里的文件则可以通过url来访问

例如 ：

         读取css文件 访问https://abc.com/css/index.css   这是错误的，不可访问的

         读取img文件 访问https://abc.com/img/logo.png 这是可以正常识别和访问的，同样你将公开css文件、js文件以及html文件放置在public文件夹下 都是可以通过url来访问资源，因为这是公开的

在nuxt3中的Components目录和Vue3/2项目中的目录存放都没什么区别，得意之处在于，Nuxt3是采用自动引入功能的，在全局任何.vue组件中使用 你的自定义组件(Components) 都是可以直接导入的，无需手动引入

例如：  目录树是这样的
components              
├─ Article              
│  ├─ List.vue          
│  ├─ LoginBox.vue      
│  └─ PageCard.vue      
├─ CtrlPanel            
│  └─ Aside.vue         
├─ Header               
│  ├─ Ctrl              
│  │  └─ index.vue      
│  ├─ LogoMenu          
│  │  └─ index.vue      
│  └─ index.vue

我想在index.vue 中 使用组件Header如何使用？ 答案是直接在index.vue的<template></template>中直接使用<Header></Header>标签，使用Header里的Ctrl呢？ 同理直接使用<HeaderCtrl></HeaderCtrl>即可！ 这是一个很棒的设计！

这个目录下的文件给我的感觉像极了Vue3中的Hooks，它的使用方式我是这么定义的在该文件夹下创建一些文件夹composables             
├─ ElMessageBoxTips.ts  
├─ README               
└─ useLocalStorage.ts   同样在index.vue中 则可以直接使用该函数，不用导入！

例如： 这是封装好的一个 ElMessageBoxTips 回调函数

import { ElMessageBox, ElMessage } from 'element-plus'

// 二次封装 回调 Element 提示框 结果只返回 true / false
function WarningTips(Tips: string): Promise<string> {
  return new Promise((resolve) => {
    ElMessageBox.confirm(
      Tips,
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      resolve('true');
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消该操作',
      });
      resolve('false');
    });
  });
}

export default {
  WarningTips
}

我们在全局任意的.vue组件中都可以这么使用

if (await ElMessageBoxTips.WarningTips('放弃注册吗？') === 'true') {
    router.back()
  }

直接调用ElMessageBoxTips.WarningTips方法 ，这个丝滑的过程得益于Nuxt3的自动引入，全程无感操作，纵享丝滑~

这个目录里存放的文件都是中间件，用过Express起服务的小伙伴应该都熟悉，在Nuxt3中，现阶段对middleware的理解是，在1路由 跳转到2路由时 所作用的方法，举个典例在常见的Vue项目中，我们都需要手动定义路由， 例如：

import { createRouter, createWebHistory } from 'vue-router'
// 创建路由对象
import RouterMap from '@/router/routerMap'
// 导入路由对象
import { ElNotification } from 'element-plus'
// 导入element-plus插件
// layout 布局
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),//TODO 生产环境需要修改为/admin/ import.meta.env.BASE_URL
  routes: RouterMap
})
// 创建路由前置操作
router.beforeEach((to, from, next) => {
  // 获取token
  const token: boolean = localStorage.getItem('token')!== 'undefined' && localStorage.getItem('token')!== null && localStorage.getItem('token')!== undefined? true : false
  // 获取是否拦截路由
  const interceptionPath: boolean = to.path.match(/^\/controlPanel/)? true : false
  // 如果拦截路由，则拦截
  if (interceptionPath) {
    if (token) {
      next()
    } else {
      ElNotification({
        title: '错误',
        message: '未登录 禁止操作！',
        type: 'warning',
      })
      next('/')
    }
  } else {
    // 否则不拦截
    next()
  }
})
// 路由拦截
export default router

但是在Nuxt3中，你知道的，路由是自动构建的，无需我们手动编写(当然也不是不行233)，在Nuxt3中middleware里的文件就能帮我们实现这个路由守卫功能了，我们在middleware文件夹下创建一个middleware         
├─ auth.global.ts  
└─ README                                                                                                                                            auth.global.ts，里面的内容是

// 路由守卫
export default defineNuxtRouteMiddleware((to, from) => {
  let token: string | null = ''
  const toPath = to.fullPath;
  if (toPath.match(/^\/CtrlView\//) || toPath.match(/^\/CtrlView/)) {
    if (process.env.NODE_ENV === 'development' && typeof localStorage !== 'undefined') {
      token = localStorage.getItem('token')
      if (token) {
        return true
      } else {
        return navigateTo('/Login')
      }
    }
  }
  return true
})

    这样就能直接在全局中定义了一个路由中间件，而这个中间件的作用就是鉴权，当然你可以设计多个中间件，用于处理路由参数等等等...

关于命名方式：在middleware目录下 在文件中添加后缀.global.ts 则被是为全局的中间件，如果你不希望这个中间件被全局调用，只想在某些路由中使用，那就正常的命名auth.ts文件，在需要引入的组件中

<script setup>
definePageMeta({
  middleware: ["auth"]
  // or middleware: 'auth'
})
</script>

调用即可！