Vue-TypeScript 应用程序类型错误：无法读取未定义的属性（读取“配置”）

Question

我是 Vue 3 和 TypeScript 的新手，并且正在使用 PrimeVue。 我正在尝试通过创建一个简单的待办事项应用程序来学习。 我遇到了一个错误，上面写着

Uncaught TypeError: Cannot read properties of undefined (reading 'config')
at Proxy.containerClass (menu.esm.js:306:50)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
at get value [as value] (reactivity.esm-bundler.js:1144:39)
at Object.get [as containerClass] (runtime-core.esm-bundler.js:3427:30)
at menu.esm.js:346:33
at Proxy.renderFnWithContext (runtime-core.esm-bundler.js:853:21)
at Proxy.<anonymous> (runtime-core.esm-bundler.js:1947:78)
at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5580:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

我不确定这意味着什么。 我搜索了配置代码，但仍然不明白问题所在。 这是一个片段，如果它有帮助的话。

 <script setup lang="ts">
 import { ref } from 'vue';
 import Menubar from 'primevue/menubar'
 import Menu from 'primevue/menu';

    const items = ref([
        {  
            items: [{
                label: 'Search',
                icon: 'pi pi-search',
                uri: './LeftNavigation.vue'
            },
            {
                label: 'View Completed',
                icon: 'pi pi-check-square', 
                uri: ''
            },
            {
                label: 'Delete',
                icon: 'pi pi-trash',
                uri: ''
            },
            {
                label: 'View Archived',
                icon: 'pi pi-cloud-upload',
                uri: ''
            },
            {
                label: 'View All',
                icon: 'pi pi-list',
                uri: ''
            },                                                                
        ]},
    ]);
   </script>

   <template>
     <div style="background-color:brown;width:50px">
       <Menu :model="items" />
     </div>
   </template>

   <style lang="scss" scoped>

   </style>

Answer 1

我认为你必须像这样导入它：

 <script setup lang="ts">
 import Menu from 'primevue/menu/sfc';

https://www.primefaces.org/primevue/setup

Answer 2

在安装 PrimeVue 插件之前，您已经安装了应用程序：

// main.ts
⋮
const app = createApp(App)
app.mount('#app') 👈
app.use(PrimeVue)
app.use(DialogService)

这会导致您在 PrimeVue 组件尝试查找其配置时遇到的错误，该配置应该由插件设置。

解决方案

挂载组件作为最后一个初始化步骤：

// main.ts
⋮
const app = createApp(App)
app.use(PrimeVue)
app.use(DialogService)
app.mount('#app') 👈