概要: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>