大家好,我目前正在做一个Vuejs3项目,我安装了Primevue,我把它添加到我的main.js,并把Menubar导入到我的App.vue。我测试了它,我得到了这个警告,我不知道我如何才能摆脱它,因为一切都工作得很好,除了我的控制台得到垃圾邮件的警告。App.vue
<template>
<div class="card relative z-2">
<i class="pi pi-sliders-h" @click="toggleMenu" style="font-size: 1.5rem" id="settings2" />
<Menubar v-if="showMenu" :model="items" />
</div>
</template>
<script>
import Menubar from 'primevue/menubar';
export default {
name: "App",
components: {
Menubar,
},
setup() {
const showMenu = ref(false);
const items = ref([
{
label: 'Colors',
icon: 'pi pi-fw pi-palette',
items: [
{
label: 'Default',
icon: 'pi pi-fw pi-check',
command: () => {
updateSelectedColorPalette('default');
},
},
{
label: 'Vibrant Palette',
icon: 'pi pi-fw pi-check',
command: () => {
updateSelectedColorPalette('vibrant-palette');
},
},
{
label: 'Monochromatic Palette',
icon: 'pi pi-fw pi-check',
command: () => {
updateSelectedColorPalette('monochromatic-palette');
},
},
{
label: 'Contrasting Palette 1',
icon: 'pi pi-fw pi-check',
command: () => {
updateSelectedColorPalette('contrasting-palette-1');
},
},
{
label: 'Contrasting Palette 2',
icon: 'pi pi-fw pi-check',
command: () => {
updateSelectedColorPalette('contrasting-palette-2');
},
},
],
},
{
label: 'Background',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'white',
icon: 'pi pi-fw pi-check',
command: () => {
updateBackground(false);
},
},
{
label: 'grey',
icon: 'pi pi-fw pi-check',
command: () => {
updateBackground(true);
},
},
],
}
]);
function toggleMenu() {
showMenu.value = !showMenu.value;
}
function updateSelectedColorPalette(value) {
<!-- some code -->
}
function updateBackground(value) {
<!-- some code -->
}
return {
items,
showMenu,
toggleMenu,
};
},
};
</script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import { createPinia } from "pinia";
import { plugin as VueTippy } from "vue-tippy";
import "tippy.js/dist/tippy.css";
import sharedFunctions from "./sharedFunctions.js";
const app = createApp(App)
.use(createPinia())
.use(PrimeVue)
.use(VueTippy, {
directive: "tippy",
component: "tippy",
componentSingleton: "tippy-singleton",
defaultProps: {
allowHTML: true,
},
});
for (const key in sharedFunctions) {
app.config.globalProperties[key] = sharedFunctions[key];
}
app.mount("#app");
但我得到了这个警告,当我悬停在元素上时,它会再次出现
[Vue warn]: Failed to resolve component: router-link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MenubarSub ref=fn<bound menubarRef> id=undefined class="p-menubar-root-list" ... >
at <Menubar key=0 model=
Array [ {…}, {…} ]
>
at <App> runtime-core.esm-bundler.js:41
1条答案
按热度按时间plicqrtu1#
您在代码中的某个地方使用了
RouterLink
组件,该组件是VueRouter库的一部分。如果您不使用它,则需要将其从代码中删除(尝试检查App.vue),如果Primevue组件需要它,则需要添加VueRouter。