Tailwind Vue 导航栏组件不显示

Question

顺便说一句，我是 Vue 的新手，当我运行npm run dev时，我的主页是空白的，导航栏没有出现，尝试了很多东西但没有任何效果。

这是我的代码：

<!--navbar.vue-->    
<template>
    <nav class="flex justify-between p-6 px-4">
        <div class="flex justify-between items-center w-full">
            <div class="x1:w-1/3">
                <a class="block max-w-max">
                    <img class="h-8" src="../public/img/logo.png" alt="logo">
                </a>
            </div>
            <div class="hidden x1:block x1:w-1/3">
                <ul class="flex justify-center">
                    <li class="mr-12">
                        <router-link
                            class="text-coolGray-500 hover:text-coolGray-900 font-medium" 
                            active-class="active"
                            to="{name:'Chatbot'}"
                            >
                            Chatbot
                        </router-link>
                    </li>
                    <li class="mr-12">
                        <router-link
                            class="text-coolGray-500 hover:text-coolGray-900 font-medium" 
                            active-class="active"
                            to="{name:'History'}"
                            >
                            History
                        </router-link>
                    </li>
                    <li class="mr-12">
                        <router-link
                            class="text-coolGray-500 hover:text-coolGray-900 font-medium" 
                            active-class="active"
                            to="{name:'Requests'}"
                            >
                            Requests
                        </router-link>
                    </li>
                    <li></li>
                </ul>

            </div>
            <div class="hidden x1:block x1:w-1/3">
                <div class="flex justify-end">
                    <div class="flex items-center justify-end">
                        <div v-if="!isAuthenticated" class="mr-4">
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium" 
                                active-class="active"
                                to="{name:'Login'}"
                                >
                                Login
                            </router-link>
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium" 
                                active-class="active"
                                to="{name:'Register'}"
                                >
                                Register
                            </router-link>
                        </div>
                        <div v-else class="mr-4">
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium" 
                                active-class="active"
                                to="{name:'Profile'}"
                                >
                                Profile
                            </router-link>
                            <router-link
                                class="text-coolGray-500 hover:text-coolGray-900 font-medium" 
                                active-class="active"
                                to="{name:'Logout'}"
                                >
                                Logout
                            </router-link>
                    </div>
            </div>
        </div>
        </div>
        </div>
        <button class="navbar-burger self-center x1:hidden">
            <svg width="35" height="35" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect class="text-coolGray-50" width="32" height="32" rx="6" fill="currentColor"></rect>
                <path class="text-coolGray-500" d="M7 12H25C25.2652 12 25.5196 11.8946 25.7071 11.7071C25.8946 11.5196 26 11.2652 26 11C26 10.7348 25.8946 10.4804 25.7071 10.2929C25.5196 10.1054 25.2652 10 25 10H7C6.73478 10 6.48043 10.1054 6.29289 10.2929C6.10536 10.4804 6 10.7348 6 11C6 11.2652 6.10536 11.5196 6.29289 11.7071C6.48043 11.8946 6.73478 12 7 12ZM25 15H7C6.73478 15 6.48043 15.1054 6.29289 15.2929C6.10536 15.4804 6 15.7348 6 16C6 16.2652 6.10536 16.5196 6.29289 16.7071C6.48043 16.8946 6.73478 17 7 17H25C25.2652 17 25.5196 16.8946 25.7071 16.7071C25.8946 16.5196 26 16.2652 26 16C26 15.7348 25.8946 15.4804 25.7071 15.2929C25.5196 15.1054 25.2652 15 25 15ZM25 20H7C6.73478 20 6.48043 20.1054 6.29289 20.2929C6.10536 20.4804 6 20.7348 6 21C6 21.2652 6.10536 21.5196 6.29289 21.7071C6.48043 21.8946 6.73478 22 7 22H25C25.2652 22 25.5196 21.8946 25.7071 21.7071C25.8946 21.5196 26 21.2652 26 21C26 20.7348 25.8946 20.4804 25.7071 20.2929C25.5196 20.1054 25.2652 20 25 20Z" fill="currentColor">
                </path>
            </svg>
        </button>
    </nav>

</template>

<script>
    import {mapGetters} from 'vuex';

    export default{
        name:"navbar",
        computed:{
            ...mapGetters(['isAuthenticated'])
        }


    }

</script>

应用程序.vue

    <script >
  import navbar from './components/navbar.vue';

  export default {
    components: {
      navbar,
    },
  };
  
</script>

<template>

  <div id="app">
  <navbar />
  <router-view></router-view>
</div>

</template>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

这些是 tailwind/postcss 配置文件

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],
  theme: {
    extend: {},
corePlugins: {},
plugins: [],
}
}

postcss.config.cjs

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

将不胜感激任何帮助谢谢。 我将使用 Vue.js 作为我在后端使用 DRF 的用例的前端

Answer 1

似乎您将hidden的 class 添加到导航的不同区域。 单击时，您的 MENU 按钮应删除此 class。

尝试将hidden的第一个div更改为以下内容：

  <div class="x1:block x1:w-1/3" :class="show ? '' : 'hidden'">

您的菜单按钮：

 <button @click="show = !show" class="navbar-burger self-center x1:hidden">
      MENU
    </button>

最后你的脚本：

data() {
    return {
      show: false,
    };
  },

附言。 确保您的router-link to={}使用的是bind 。 v-bind:to="{...}"或:to="{...}"