Неизвестная ошибка пользовательского элемента в проекте Vue.js - PullRequest
Новая
       13

Неизвестная ошибка пользовательского элемента в проекте Vue.js

0 голосов
/ 08 ноября 2019

Я начал создавать проект в vue.js на основе этого: https://github.com/creativetimofficial/vuetify-material-dashboard

При попытке интегрировать TableList.vue компонент я получаю сообщение об ошибке:

Unknown custom element: <material-card> - did you register the component correctly?

Проект Vue.js был создан с помощью веб-шторма. Я скопировал в папку styles и позволил наблюдателю скомпилировать файлы scss в css. Я запускаю проект, используя команду npm serve в WebStorm.

Мой App.vue выглядит немного по-другому: 

<template>
  <v-app>
    <TheBar />
    <TheNavigationDrawer />
    <TheView />
  </v-app>
</template>

<script>

import TheBar from '@/components/core/TheBar.vue'
import TheNavigationDrawer from "@/components/core/TheNavigationDrawer";
import TheView from '@/components/core/TheView.vue'

export default {
  name: 'app',
  components: {
    TheBar,
    TheNavigationDrawer,
    TheView
  },
  data: () => ({
  }),
};
</script>

<style lang="scss">
  @import './styles/index.scss';
</style>

Как видите, я импортирую полный файл, который ввключите импорт _cards.scss файл, который должен иметь определение компонента карты материала. Вот как это работает?

Я попытался зарегистрировать компонент вручную, добавив карточку материала в свойство components, но он не может правильно проанализировать регистр kebab из-за знака «-».

Что меня также интригует, так это то, что оригинальный создатель НИКОГДА не регистрирует компонент карты материала, так как, черт возьми, его компонент TableList.vue знает об этом?

Я также нашел это руководство - https://medium.com/@mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9. Однако я нигде не вижу файла webpack.config.js, где это?

Любая помощь очень ценится. : D

1 Ответ

2 голосов
/ 08 ноября 2019

Существует несколько способов импорта компонентов в ваш экземпляр Vue. В случае проекта, с которым вы работаете, библиотека vuetify импортируется в корневой экземпляр, что позволяет всем компонентам быть доступными глобально. Это означает, что вам не нужно импортировать нужные компоненты в определенные файлы .vue.

Вероятно, вы не правильно установили все зависимости. Или вы неправильно импортировали эти зависимости в main.js. Убедитесь, что эти зависимости (находятся в package.json) были установлены, запустив npm list .

...