概要：nuxt3使用taillwindcss，1、taillwindcss的安装与配置。2、全局样式导入。3、路由配置与数据获取

安装

// 如果依赖安装失败使用cnpm
npx nuxi@latest init <project-name>

taillwindcss配置

1、安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2、配置tailwind.config.js

module.exports = {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.{js,ts}',
    './plugins/**/*.{js,ts}',
    './app.{js,ts,vue}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3、创建**tailwind.css**

/* assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4、配置nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  /*...*/
  css: ['@/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
})

5、使用taillwindcss

<template>
  <div>
    <div class="text-3xl">
      这是一个标题
    </div>
  </div>
</template>

界面

组件

在components文件下创建的组件可以直接使用无需显示引用

<!-- components/Test.vue -->
<template>
  <div>
    我不是小黑子
  </div>
</template>
<script lang="ts" setup>

</script>
<style></style>

<template>
  <div>
    <div class="text-3xl">
      这是一个标题
    </div>
    <Test></Test>
  </div>
</template>

页面

页面代表了每个特定路由模式的视图。pages/ 目录中的每个文件都表示一个不同的路由，显示其内容。（pages/index.vue 代表首页）

资源

资源目录

• 在 public/img/ 目录中引用一个图像文件，该文件可通过静态URL /img/nuxt.png
• Nuxt使用 assets/ 目录来存储构建工具文件，但该目录没有自动扫描功能，你可以使用任何其他名称。在应用程序的代码中，你可以通过使用 ~/assets/ 路径来引用位于 assets/ 目录中的文件。

全局样式导入

$primary: #49240F;
$secondary: #E4A79D;

export default defineNuxtConfig({
  /*...*/
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }
    }
  }
  /*...*/
})

路由

路由中间件

:::info 命名路由中间件：放置在middleware/目录中，当在页面中使用时，会通过异步导入自动加载。（注意：路由中间件名称会转换为短横线分隔命名，因此someMiddleware会变成some-middleware。）

:::

//middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  console.log(to, from)
})

<!-- pages/index.vue -->
<template>
  <div>
    这是主页definePageMeta
    <div class="color">123</div>
  </div>
</template>
<script lang="ts" setup>
  definePageMeta({
    middleware: 'auth'
  })
</script>

全局中间件

:::info 全局路由中间件，放置在middleware/目录中（使用.global后缀），将在每次路由更改时自动运行。

:::

//middleware/auth.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
  console.log('auth.global=====>')
  console.log(to, from)
})

Server

:::info ~/server/api目录中的文件会自动在其路由中添加/api前缀。

要添加没有/api前缀的服务器路由，请将它们放入~/server/routes目录中。

:::

// 可以通过http://localhost:3000/hello访问
export default defineEventHandler(() => 'Hello World!')

// 可以通过http://localhost:3000/api/hello访问
export default defineEventHandler(() => 'Hello World!')

数据获取

export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})

<script lang="ts" setup>
const res = await useFetch('/api/test')
console.log('res===>', res)
</script>