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

Question

我开始在 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 文件夹并启用 watcher 将 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 文件，该文件应该具有 material-card 组件的定义。这是它的工作原理吗？

我尝试通过将 material-card 添加到 components 属性来手动注册组件，但由于“-”符号，它无法正确解析 kebab-case。

同样让我感兴趣的是，原始创建者从不注册 material-card 组件，所以他的 TableList.vue 组件到底是怎么知道的？

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

非常感谢任何帮助。 :D

Answer 1

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

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

安装

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

Unknown custom element error in Vue.js project

sass

webstorm

vue.js