laravel-mix-vue3 - 无头 Ui vue 脚本对我不起作用

问题描述

所以我偶然发现了无头 ui，因为 tailwind ui 使用它来实现它们的功能，但我的代码不起作用..我已经成功安装了 vue 3，这是 headlessui/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>&middot;</li>
                <li>{{ post.commentCount }} comments</li>
                <li>&middot;</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>

这是我的 package.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"
    }

然后是我处理我的 vue 组件的 app.js

 require('./bootstrap');

 import { createApp } from 'vue'
 import example from './components/ExampleComponent.vue'
 import test from './components/test.vue'


     createApp({
         components:{
         example,
         test,
         }
     }).mount('#app')

如果我了解这种结构的工作原理，我真的希望任何人都可以帮助我，这将对我的职业生涯有很大帮助

标签： laravel-mix-vue3

laravel-mix-vue3 - 无头 Ui vue 脚本对我不起作用

问题描述

解决方案

推荐阅读