在 laravel 项目中使用 daisyui 和 vite | laravel china 社区-江南app体育官方入口

/ 491 / 2 / /

好的！在 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:


<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">myappa>
  div>
  <div class="navbar-center">
    <a class="btn btn-ghost normal-case">homea>
    <a class="btn btn-ghost normal-case">abouta>
  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 titleh2>
    <p>this is a sample card component.p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">learn morebutton>
    div>
  div>
div>

第五步：编译资源

通过 vite 编译资源非常简单。运行以下命令来编译并启动开发服务器：

npm run dev

如果你需要生产环境的优化编译，使用以下命令：

npm run build

结语

通过本教程，你已经学会了如何在 laravel 项目中使用 vite、tailwind css 和 daisyui 来快速搭建响应式网站界面。daisyui 提供了大量美观的 ui 组件，可以帮助你快速构建应用前端。

本作品采用《cc 协议》，转载必须注明作者和本文链接

攻城狮 @ 个人

暂无个人描述~

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

以构建论坛项目 larabbs 为线索，展开对 laravel 框架的全面学习。应用程序架构思路贴近 laravel 框架的设计哲学。

在 laravel 项目中使用 daisyui 和 vite | laravel china 社区-江南app体育官方入口