nuxt 目录结构

一览

---- api 接口
---- components 复用组件
---- composables 组合式函数
---- layouts 页面框架结构
---- locales 本地化文件
---- middleware 导航守卫，导航到特定路由之前运行的代码
---- pages 页面
     ---- products
     ---- [id].vue // localhost:3000/products/10 -- route.params.id = 10
---- plugins 插件系统，会被 nuxt 自动读取
---- utils 公共方法

layout

<template>
  <NuxtLayout name="default">
    <NuxtPage />
  </NuxtLayout>
</template>

middleware

export default defineNuxtRouteMiddleware(async (to, from) => {
  // navigateTo
  // return navigateTo(route-path)
  // - - - -
  // abort
  // if (to.params.id === '1') {
  //   return abortNavigation()
  // }
});

plugins

export default defineNuxtPlugin((nuxtApp) => {
  // app hook
  // more: https://www.nuxt.com.cn/docs/api/advanced/hooks#nitro-app-hooks-runtime-server-side
  nuxtApp.hook("page:start", () => {
    /* write code */
  });

  if (process.client) {
    // only client
  }

  if (process.server) {
    // only server
  }

  // 接入 vue3 插件
  nuxtApp.vueApp.use(vue3Plugin, {
    // plugin config
  })
});

tips:

• plugins/plugin.js => server 和 client 都会生效
• pliguns/plugin.client.js 仅在 client 端生效

composables

export function useMyComposable() {
  // same to use in plugin or component
  const nuxtApp = useNuxtApp();

  // provide utils function
  nuxtApp.provide("hello", (name) => `Hello ${name}!`);
  console.log(nuxtApp.$hello("name")); // 输出 "Hello name!"
}