2

我目前正在使用 Vue.js 和 Vuesax 框架来创建一个 webapp。我通过 NPM 安装了所有东西。我能够创建路由器链接和路由器视图以在不同页面上显示数据，但是当我尝试将导航栏导入到我的主 App.vue 组件时，导航栏显示的所有内容都是文本，没有颜色或样式出现。我的 IDE 没有返回错误，否则页面加载完美。关于问题的唯一迹象是我是否使用浏览器检查模式。我在那里收到三个与导航栏组件特别相关的警告。

导航栏.vue

    <template>
    <div class="center examplex">
      <vs-navbar color="#7d33ff" text-white square center-collapsed v-model="active">
        <template #left>
        </template>
        <vs-navbar-item :active="active == 'guide'" id="guide">
          Guide
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'docs'" id="docs">
          Documents
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'components'" id="components">
          Components
        </vs-navbar-item>
        <vs-navbar-item :active="active == 'license'" id="license">
          license
        </vs-navbar-item>
        <template #right>
          <vs-button color="#fff" flat >Login</vs-button>
          <vs-button color="#fff" border >Get Started</vs-button>
        </template>
      </vs-navbar>
      <div class="square">
        
      </div>
    </div>
  </template>

  <script>

  import 'vuesax/dist/vuesax.css'

  export default {
    data:() => ({
      active: 'guide'
    })
  }

  </script>

应用程序.Vue

<template>
  <div id="nav">
    <NavBar></NavBar>
    <router-link :to="{ name: 'Home'}">
      Home
    </router-link>
    <router-link :to="{ name: 'About'}">
      About
    </router-link>
    <router-view />
    
  </div>

  
</template>


<script>
import NavBar from "./components/NavBar.vue";
export default {
  components: {
    NavBar
  }
}
</script>

<style>

</style>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

浏览器警告

[Vue warn]: Failed to resolve component: vs-navbar-item
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NavBar> 
  at <App>

[Vue warn]: Failed to resolve component: vs-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NavBar> 
  at <App>

[Vue warn]: Failed to resolve component: vs-navbar
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NavBar> 
  at <App>

任何帮助将不胜感激。

4

0 回答 0