Я создал проект Vue.JS, и у меня возникла проблема. На самом деле, я бы хотел, чтобы App.vue отображался на всей странице, а мои разные маршруты отображались в App.vue с помощью router-view.
Однако, когда я пытаюсь установить отступ для содержимого моего игрового компонента, кажется, что отступ есть не у моего компонента Игра, а у компонента Приложение.
Ниже приведены два моих файла .vue.
App.vue
<template>
<div id="app" class="bg-gray-500 h-full">
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style>
</style>
Game.vue
<template>
<div>
<div id="game">
<div class="bg-white rounded-lg p-6 w-1/2" style="margin-top:10px">
<h1>Hi</h1>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Game'
}
</script>
<style>
#game{
margin : -0px !important;
height: 100vh;
top:0;
background-color:red
}
</style>
Проблема заключается в маленькой белой полосе вверху, которой там быть не должно, а должна быть белая карточка, верхняя граница которой должна быть 10px
РЕДАКТИРОВАТЬ (файл main.js):
import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/tailwind.css'
import VueCookies from 'vue-cookies'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueCookies)
Vue.use(VueRouter)
const router = new VueRouter({
mode:'history',
routes: [
{path: '/home', component: require('./components/Home.vue').default},
{path: '/', component:require('./components/Game.vue').default}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');