Nuxt3--项目文件夹的介绍

JiHua
2023-10-05
131

Nuxt3JS项目目录数据记录

Assets和public目录的区别

一般来说,在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来访问资源,因为这是公开的

public/目录直接服务于服务器根目录,包含必须保留其名称的公共文件(例如:robots.txt)或可能不会更改(例如:favicon.ico)。 -- 官网

Components 目录

在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>即可! 这是一个很棒的设计!

Composables 目录

这个目录下的文件给我的感觉像极了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的自动引入,全程无感操作,纵享丝滑~

 Middleware 目录

这个目录里存放的文件都是中间件,用过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>

调用即可!

标签:Nuxt3、nuxt项目、项目