在 Laravel 项目中使用 DaisyUI 和 Vite

CokeWithIce 的个人博客 / 620 / 2 / 创建于 6个月前 / 更新于 6个月前

好的！在 Laravel 中，现在默认使用 Vite 来编译前端资源。我们来更新教程，改为使用 Vite 编译 DaisyUI 和 Tailwind CSS。

在 Laravel 项目中使用 DaisyUI 和 Vite#

第一步：安装 Laravel#

如果你还没有安装 Laravel，可以使用 Composer 来创建新项目：

composer create-project --prefer-dist laravel/laravel my-laravel-app

安装完成后，进入项目目录：

cd my-laravel-app

第二步：安装 Tailwind CSS#

Laravel 项目已经默认使用 Vite 来编译前端资源。接下来我们安装 Tailwind CSS：

安装 Tailwind CSS 及其相关依赖：

npm install -D tailwindcss postcss autoprefixer

生成 tailwind.config.js 文件：

npx tailwindcss init -p

编辑 tailwind.config.js，将内容配置为：

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 resources/css/app.css 中引入 Tailwind 的基础样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

修改 vite.config.js 文件，确保 Vite 正确编译 CSS。通常你不需要额外配置，默认情况下已经可以工作：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

第三步：安装 DaisyUI#

接下来我们安装 DaisyUI，这将为项目提供丰富的组件库：

npm i -D daisyui@latest

然后，修改 tailwind.config.js 文件，引入 DaisyUI 插件：

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
}

Blade 模板引擎引入 css 和 js:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
    @vite('resources/js/app.js')
</body>
</html>

第四步：使用 DaisyUI 组件#

现在你可以在 Blade 模板中使用 DaisyUI 组件了。以下是一些常用组件的示例：

按钮 (Button)

<button class="btn btn-primary">点击我</button>

导航栏 (Navbar)

<nav class="navbar bg-base-100">
  <div class="navbar-start">
    <a class="btn btn-ghost normal-case text-xl">MyApp</a>
  </div>
  <div class="navbar-center">
    <a class="btn btn-ghost normal-case">Home</a>
    <a class="btn btn-ghost normal-case">About</a>
  </div>
</nav>

卡片 (Card)

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="/path/to/image.jpg" alt="Image" /></figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>This is a sample card component.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Learn More</button>
    </div>
  </div>
</div>