Flowbite不是在组件中工作，而是在根中工作。

Question

挣扎着设置花比一段时间。我遵循了他们的教程- 流咬文档。但是，下拉列表和其他元素不具有互动性。我有一种感觉，由于某种原因，Javascript没有被激活，因为每当我点击像下拉列表这样的元素时，什么都不会发生。我正在使用Vue，如果我尝试使用带有index.html下拉列表的随机导航条，一切都很好。但是，每当我试图在组件中使用它时，它就无法工作。

这是我的tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
  variants: {
    extend: {
      animation: ['group-hover'],
    },
  },
};

main.ts文件：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './index.css';
import 'flowbite';
createApp(App).use(store).use(router).mount('#app');

而依赖项，如您所看到的那样，在这里：

"dependencies": {
    "autoprefixer": "^9.8.8",
    "core-js": "^3.6.5",
    "flowbite": "^1.5.3",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
},

Answer 1

由于您已经安装了flowbite，请确保您的设置遵循以下规则

npm i流比特-vue需要在tailwind.config.js文件中作为插件流比特：

module.exports = {
  content: [
    ...,
    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [..., require('flowbite/plugin')],
};

我还建议你重新阅读官方网站上的文档。

花点