在Nuxt中整合Tailwind CSS
...
在Nuxt中整合Tailwind CSS
创建Nuxt 3项目
官方文档:https://nuxt.com/docs/getting-started/installation
pnpm dlx nuxi@latest init nuxt3-tailwind
提示
可能超时,要在 C:\Windows\System32\drivers\etc
设置一下hosts
185.199.111.133 raw.githubusercontent.com
安装Tailwind CSS
官方文档:https://tailwindcss.com/docs/guides/nuxtjs#standard
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
在 nuxt.config.ts
中设置
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
css: ['~/assets/css/tailwind.css'],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
})
在 content
中配置生效的路径
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue",
],
theme: {
extend: {},
},
plugins: [],
}
创建一个 ./assets/css/tailwind.css
,并加入以下代码
@tailwind base;
@tailwind components;
@tailwind utilities;
在 nuxt.config.ts
添加 css: ['~/assets/css/tailwind.css'],
安装Tailwind UI
安装 Headless UI 和 Heroicons
pnpm install @headlessui/vue @heroicons/vue
导入一个 Tailwind UI 的 SideBar 组件
创建一个布局
- 创建一个
layouts
文件夹 - 在该文件夹下创建一个
default.vue
- 复制
sidebar
代码到default.vue
,并在需要显示内容的地方加上<slot />
标签
配置 app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<NuxtPage />
是用于渲染 pages
文件夹下的页面
创建 pages 文件下的 index.vue
<template>
<div>
<NuxtLink to="/">Welcome</NuxtLink>
</div>
</template>
注意
完成!创建的时候踩了一个坑
同一IP和端口下,上一个运行项目的缓存,会影响下一个项目
Nuxt会提示 nuxt [Vue Router warn]: No match found for location with path
清理浏览器缓存即可
你认为这篇文章怎么样?
- 0
- 0
- 0
- 0
- 0
- 0