Блог

В настоящее время я использую Vue.js и фреймворк Vuesax для создания веб-приложения. У меня все установлено через NPM. Я могу создавать ссылки на маршрутизаторы и представления маршрутизаторов для отображения данных на разных страницах, однако, когда я пытаюсь импортировать навигационную панель в свой основной компонент App.vue, все, что отображается на навигационной панели, — это текст, ни один из цветов или стилей не отображается. Моя среда IDE не возвращает ошибок, и в остальном страница загружается идеально. Единственное указание на то, что не так, — это если я использую режим проверки браузеров. Я получаю там три предупреждения, конкретно связанных с компонентами навигационной панели.

NavBar.vue

 lt;templategt;  lt;div class="center examplex"gt;  lt;vs-navbar color="#7d33ff" text-white square center-collapsed v-model="active"gt;  lt;template #leftgt;  lt;/templategt;  lt;vs-navbar-item :active="active == 'guide'" id="guide"gt;  Guide  lt;/vs-navbar-itemgt;  lt;vs-navbar-item :active="active == 'docs'" id="docs"gt;  Documents  lt;/vs-navbar-itemgt;  lt;vs-navbar-item :active="active == 'components'" id="components"gt;  Components  lt;/vs-navbar-itemgt;  lt;vs-navbar-item :active="active == 'license'" id="license"gt;  license  lt;/vs-navbar-itemgt;  lt;template #rightgt;  lt;vs-button color="#fff" flat gt;Loginlt;/vs-buttongt;  lt;vs-button color="#fff" border gt;Get Startedlt;/vs-buttongt;  lt;/templategt;  lt;/vs-navbargt;  lt;div class="square"gt;    lt;/divgt;  lt;/divgt;  lt;/templategt;   lt;scriptgt;   import 'vuesax/dist/vuesax.css'   export default {  data:() =gt; ({  active: 'guide'  })  }   lt;/scriptgt;  

Приложение.Vue

 lt;templategt;  lt;div id="nav"gt;  lt;NavBargt;lt;/NavBargt;  lt;router-link :to="{ name: 'Home'}"gt;  Home  lt;/router-linkgt;  lt;router-link :to="{ name: 'About'}"gt;  About  lt;/router-linkgt;  lt;router-view /gt;    lt;/divgt;    lt;/templategt;   lt;scriptgt; import NavBar from "./components/NavBar.vue"; export default {  components: {  NavBar  } } lt;/scriptgt;  lt;stylegt;  lt;/stylegt; lt;stylegt; #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; } lt;/stylegt;  

Browser warnings

 [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 lt;NavBargt;   at lt;Appgt;  [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 lt;NavBargt;   at lt;Appgt;  [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 lt;NavBargt;   at lt;Appgt;  

Любая помощь будет очень признательна.