所以我偶然发现了headlessui，因为顺风ui使用这个功能，但我的代码不起作用…我已经成功安装了vue 3，这是headless/vue的要求，但我不能让它在我的终端上工作。这就是我说的代码
<template>
<div class="w-full max-w-md px-2 py-16 sm:px-0">
<TabGroup>
<TabList class="flex p-1 space-x-1 bg-blue-900/20 rounded-xl">
<Tab
v-for="category in Object.keys(categories)"
as="template"
:key="category"
v-slot="{ selected }"
>
<button
:class="[
'w-full py-2.5 text-sm leading-5 font-medium text-blue-700 rounded-lg',
'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60',
selected
? 'bg-white shadow'
: 'text-blue-100 hover:bg-white/[0.12] hover:text-white',
]"
>
{{ category }}
</button>
</Tab>
</TabList>
<TabPanels class="mt-2">
<TabPanel
v-for="(posts, idx) in Object.values(categories)"
:key="idx"
:class="[
'bg-white rounded-xl p-3',
'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60',
]"
>
<ul>
<li
v-for="post in posts"
key="post.id"
class="relative p-3 rounded-md hover:bg-coolGray-100"
>
<h3 class="text-sm font-medium leading-5">
{{ post.title }}
</h3>
<ul
class="flex mt-1 space-x-1 text-xs font-normal leading-4 text-coolGray-500"
>
<li>{{ post.date }}</li>
<li>·</li>
<li>{{ post.commentCount }} comments</li>
<li>·</li>
<li>{{ post.shareCount }} shares</li>
</ul>
<a
href="#"
:class="[
'absolute inset-0 rounded-md',
'focus:z-10 focus:outline-none focus:ring-2 ring-blue-400',
]"
/>
</li>
</ul>
</TabPanel>
</TabPanels>
</TabGroup>
</div>
</template>
<script>
import { ref } from 'vue'
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
export default {
components: {
TabGroup,
TabList,
Tab,
TabPanels,
TabPanel,
},
setup() {
let categories = ref({
Recent: [
{
id: 1,
title: 'Does drinking coffee make you smarter?',
date: '5h ago',
commentCount: 5,
shareCount: 2,
},
{
id: 2,
title: "So you've bought coffee... now what?",
date: '2h ago',
commentCount: 3,
shareCount: 2,
},
],
Popular: [
{
id: 1,
title: 'Is tech making coffee better or worse?',
date: 'Jan 7',
commentCount: 29,
shareCount: 16,
},
{
id: 2,
title: 'The most innovative things happening in coffee',
date: 'Mar 19',
commentCount: 24,
shareCount: 12,
},
],
Trending: [
{
id: 1,
title: 'Ask Me Anything: 10 answers to your questions about coffee',
date: '2d ago',
commentCount: 9,
shareCount: 5,
},
{
id: 2,
title: "The worst advice we've ever heard about coffee",
date: '4d ago',
commentCount: 1,
shareCount: 2,
},
],
})
return { categories }
},
}
</script>
这是我的包裹。带有依赖项的Json
"devDependencies": {
"@tailwindcss/ui": "^0.3",
"@vue/compiler-sfc": "^3.2.4",
"autoprefixer": "^9.6",
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.27",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"postcss-import": "^12.0",
"postcss-nested": "^4.2",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"tailwindcss": "^1.8",
"vue": "^2.6.12",
"vue-loader": "^16.5.0",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"@headlessui/vue": "^1.4.0",
"@heroicons/vue": "^1.0.4",
"@popperjs/core": "^2.9.3",
"@tailwindcss/forms": "^0.3.3",
"vue": "^3.2.4"
}
然后是我的app.js，我在那里处理我的vue组件
require('./bootstrap');
import { createApp } from 'vue'
import example from './components/ExampleComponent.vue'
import test from './components/test.vue'
createApp({
components:{
example,
test,
}
}).mount('#app')
我真的希望任何人都能帮助我，如果我了解这个结构是如何工作的，这将是一个很大的帮助，在我的事业前进
我检查了我的代码问题是我在页眉和页脚放了两个脚本标签所以我只是删除了页脚脚本，它运行得很好