[英]Tailwind Vue navbar component doesn't show
順便說一句,我是 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 的用例的前端
似乎您將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="{...}"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.