Vue.js 项目中的未知自定义元素错误答案

【问题标题】：Unknown custom element error in Vue.js projectVue.js 项目中的未知自定义元素错误
【发布时间】：2019-11-08 18:31:20
【问题描述】：

我开始基于这个在 vue.js 中创建一个项目： https://github.com/creativetimofficial/vuetify-material-dashboard

尝试集成TableList.vue 组件时，出现错误：

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

Vue.js 项目是使用 webstorm 创建的。我复制了styles 文件夹并启用了观察者将scss文件编译成css。我在 WebStorm 中使用npm serve 命令运行项目。

我的 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-case。

还有一点让我很感兴趣的是，原始创建者从不注册材料卡组件，那么他的 TableList.vue 组件到底是怎么知道的呢？

我还找到了本指南 - https://medium.com/@mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9。但是我在任何地方都没有看到 webpack.config.js 文件，这是在哪里？

非常感谢任何帮助。 :D

【问题讨论】：

标签： vue.js sass webstorm

【解决方案1】：

有多种方法可以将组件导入 Vue 实例。对于您正在使用的项目，vuetify 库在根实例中导入，这允许所有组件在全局范围内可用。这意味着您不需要在特定的 .vue 文件中导入所需的组件。

您可能没有正确安装所有依赖项。或者您没有在 main.js 中正确导入这些依赖项。通过运行 npm list 检查是否已安装这些依赖项（在 package.json 中）。

【讨论】：