Vue3+TypeScript集成PrimeVue开发Todo应用时遇config读取未定义错误

错误原因 #

这个Cannot read properties of undefined (reading 'config')错误是因为你仅在组件内导入了PrimeVue的Menu组件，但没有在Vue应用的入口文件中完成PrimeVue的全局安装，导致组件无法访问到PrimeVue的全局配置上下文，进而触发读取未定义对象的config属性的错误。

解决步骤 #

1. 确保依赖安装完整
   确认项目中已安装primevue和primeicons（你用到了PrimeIcons图标），如果没安装，执行以下命令：

   npm install primevue primeicons
   # 或 yarn add primevue primeicons
   

2. 在应用入口全局安装PrimeVue
   找到你的应用入口文件（通常是src/main.ts），添加PrimeVue的导入和安装代码：

   import { createApp } from 'vue'
   import App from './App.vue'
   // 导入PrimeVue核心配置和样式
   import PrimeVue from 'primevue/config'
   import 'primevue/resources/primevue.min.css'
   import 'primeicons/primeicons.css'
   
   const app = createApp(App)
   // 安装PrimeVue插件
   app.use(PrimeVue)
   app.mount('#app')
   

3. （可选）调整菜单数据结构
   你当前的items是嵌套数组结构，会生成一个根菜单按钮来展开子项。如果想直接显示平级菜单列表，可以简化items的结构：

   const items = ref([
       {
           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: ''
       }
   ])
   

内容的提问来源于stack exchange，提问作者OLA