大前端

主题

Nuxt3 ​

目录结构 ​

txt
|── components/      组件目录，支持自动导入
├── composables/     公共函数，支持自动导入
├── content/         公共函数，支持自动导入
├── layouts /        布局目录
├── assets/          静态资源目录(需要打包工具处理的静态资源)
├── pages/           基于文件的路由
├── plugins/         插件
├── public/          不会参与打包，与vue项目的public类似直接挂在服务器的根目录
├── middleware/      路由中间件，路由之前执行的逻辑（非服务器中间件）
├── server/          服务端（unjs/h3服务器）
|     ├── middleware/   服务器中间件目录
|     ├── plugins/      服务器插件
|     ├── utils/        服务器帮助程序
|     ├── tsconfig.json
├── modules/         本地模块
├── shared/          Vue和 Nitro 服务器之间共享的功能
├── utils/           自动导入的帮助函数
├── .nu​​xt/           开发过程过程中自动生成且很重要
├── .output/         打包时候的输出目录
├── app.vue          Nuxt 3 应用程序中的主组件 入口组件
├── nuxt.config.ts   Nuxt 配置文件
├── tsconfig.json
├── README.md
├── package.json
└── pnpm-lock.yaml

public ​

  • 不会被打包工具处理，而是直接 copy 进入输出目录
  • font 放在其中
  • 通过/xxxx的方式引用

静态资源 assets ​

  • assets 目录的文件会经过打包工具的处理，public/不会经过打包工具的处理
  • 在项目内通过~/assets/...的方式引入资源
  • assets 内可以包含图片，样式表

样式表 ​

  • 自己写的样式表（css、scss、less）放于 assets 里面, 字体放于public/里面
  • 在 js 内引入
html
<script>
  // 可以兼容服务器端
  import "~/assets/css/first.css";

  //动态导入与服务器端不兼容
  import("~/assets/css/first.css");
</script>
  • 在 css 内导入
html
<style>
  /* 方式一 */
  @import url("~/assets/css/second.css");
</style>
  • 全局导入
js
// nuxt.config.ts
export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
});
  • 固定加载
ts
// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        {
          rel: "stylesheet",
          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
        },
      ],
    },
  },
});
  • 动态加载
ts
// 页面内通过useHead加载
useHead({
  link: [
    {
      rel: "stylesheet",
      href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
    },
  ],
});

布局 ​

  • 在 layout/下创建布局组件
  • 若是只有一个布局组件，建议使用 app.vue + <NuxtPage />

页面 ​

  • 页面在pages/下面定义，然后在app.vue中添加 <NuxtPage />
  • 可以删除app.vue，直接用pages的约定式命名来构建页面路由

路由 ​

  • pages/文件系统路由
  • 使用 <NuxtLink to="/url"> xxx </NuxtLink>进行超链接，并且 NuxtLink 存在预先加载优化
  • 通过useRout()获取路由参数
  • 路由中间件（分为匿名、命名、全局三种）类似于导航守卫
  • 也可以自定义路由，不使用文件系统路由

SEO 与 Meta ​

  • 在 nuxt.config.ts 中 app.head中为整个应用配置 head
  • 使用useHead()动态配置 head
  • 可直接在模板（<template>）中书写标签 <Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> , <Head>

发请求 ​

$fetch ​

  • 用于发起请求
  • 不提供自动缓存
  • 通常用于仅会在浏览器端发出的请求（例如点击事件），否则会导致同一个请求即在服务器端发一次，html 被激活又发一次

useAsyncData ​

  • 通用的异步数据获取工具
  • 不局限于 http 请求
  • 支持 SSR
  • 提供更精细的控制

useFetch ​

  • 是 useAsyncData 和$fetch 的封装，
  • 支持 SSR
  • 大多数获取数据的场景，特别是 SSR