如何将 Flowbite Tailwind 插件添加到我的 Laravel 9 + Vite 项目中？

Question

我尝试将 flowbite 添加到我的 Laravel 项目中。我正在使用 Laravel 版本 9 和 Vite。

到目前为止，我执行了以下步骤：

1. flowbite作为依赖项安装：

npm i flowbite

2. 添加了插件tailwind.config.js：

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
  require('flowbite/plugin')
],  

3. 我将其导入App.js：

import Flowbite from 'flowbite';


4. Then I ran the app:
```shell
npm run dev

我也尝试使用 CDN 链接添加它，但它不起作用。

有人可以告诉我我做错了什么吗？或者也许你可以建议我一个更好的库来与 Tailwind CSS 一起使用，因为 Tailwind 不提供工具提示、下拉菜单等 js 组件。

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mixin({ components: { FilePond } })
            .mount(el);
    },
});

Answer 1

我已经找到了这个问题的解决方案。在主App.vue文件中，我initFlowbite从生命周期挂钩'flowbite'中导入并调用它，onMounted如下所示：

在主要App.vue

import { initFlowbite } from 'flowbite';
    
onMounted(() => {
  initFlowbite();
});

我希望这有帮助！