Блог

Итак, я создал один компонент приложения vue и обслуживал его с помощью npm build serve , а затем, когда я открываю свое приложение vue на локальном хосте, приложение остается пустым. Я не получаю ошибок, но все равно оно пустое. Я использовал эту часть css и html в react и работал. Не уверен, что является причиной этого. Я использую Vue 3. Вот исходный код моего компонента

 <template>
    <header>
   <p class="intro intro-anim">I am Ishan!</p>
  </header>
</template>
<style>
/*Header*/
header{
  height: 415px;
  padding: 4em;
  background-color: #00adb5;
}
h1 {
  text-align: center;
}
.intro{
  color: #EEEEEE;
  box-sizing: border-box;
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid black;
    font-size: 150%;
    text-align: center;
    white-space: nowrap;
   overflow: hidden;
    transform: translateY(-50%);    
}
@media screen and (max-width: 720px) {
  .intro {
    font-size: 110%;
  }
}
.intro-anim{
          animation: intro 2s steps(30) 1s 1 normal both,
             textCursor 500ms steps(30) infinite normal;
}

@keyframes intro{
  from{width: 0;}
  to{width: 19em;}
}

@keyframes textCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}
</style>
<script lang="ts">
import Vue from 'vue';
export default class Header extends Vue {}
</script>
 

И вот мой исходный код App.vue, в котором я вызываю компонент.

 <template>
 <Header />
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import Header from './components/header.vue';
import { auth, db } from './firebase';
console.log(auth)
@Options({
  components: {
    Header,
  },
})

export default class App extends Vue {}
</script>
<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
</style>

 

Я исправил проблему, закрыв терминал и затем повторно npm run serve используя. Он обновил локальный хост, и пустота была исправлена