vue.js - Vue3 : Is it possible to register single file components using app. 组件(...)？

Question

深入研究 vue 3，尝试将 Vue 添加到现有的 asp.net 核心项目中。由于前端主要是 razor 页面，因此应用程序未安装具有组件层次结构的模板化组件。

const vueApp = createApp({});

我正在尝试做的事情:

vueApp.component('MyComponent', require('./components/MyComponent').default);

vueApp.mount('#app');

我也尝试过这种方式，如 docs 中所述:

import { createApp } from 'vue/dist/vue.esm-browser'
import MyComponent from './components/MyComponent.vue'

const vueApp = createApp({
  components: {
    MyComponent
  }
});

vueApp.mount('#app');

我已经尝试过这个的每个版本。需要 MyComponent.vue，有和没有默认值，导入 MyComponent 并以这种方式使用它(而不是 require)，它们都不起作用。我只是继续收到 [Vue warn]: Failed to resolve component 'mycomponent'(是的，我确实检查了从服务器返回的 html，它的大小写正确...不确定为什么错误是小写的)。

MyComponent.vue 看起来像这样:

<template>
    <lots of vanilla html>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return { some: "data" }
    },
    methods: { ... },
    mounted() { ...}
}
</script>
//no component styling

我是不是漏掉了什么？或者这不再可能了？如果重要的话，我正在使用默认的 vue-cli webpack 配置。

谢谢

Answer 1

因此，在重新阅读文档后(感觉像是第 10 次)，我想我找到了问题所在。这实际上根本不是 Vue 问题，这是我对 Vue 组件的使用。

在我的 asp.net core cshtml 中，我引用了 PascalCase 中的组件，如下所示:

<MyComponent />

事实证明这是不行的。按照惯例(我猜是浏览器强制执行的)，自定义元素只能在 DOM 中使用 kebab-case 引用，如下所示:

<my-component />

我的 vue 应用程序仍在以 PascalCase 定义组件。

我的 main.js 文件正在导入 MyComponent，然后将其传递给 createApp options.components 对象。

const vueApp = createApp({
    components: {
        MyComponent
    }
});

我猜你知道的越多。