1、vite配置 自动导入Element Plus组件、图标(自动引入) 图标只有元素没有样式
自动导入后使用 icon组件加前缀IEp 例:<User /> -> <IEpUser />
2、 Invalid vnode type when creating vnode: 报错
可以看到除了subMenu和transition组件其他都是el的组件警告,transition是vue的组件,subMenu是自己的,那么报错大概率是subMenu的问题。
上一次代码提交时,是没有这个警告的的,那么可能是数据问题,可以看到第一条警告是ELIcon报的,打印数据时查看icon属性,发现有一条数据是没有icon的,做一下处理,报错解决
// subMenu组件
<template>
<div>
<!-- 多级菜单 -->
<el-sub-menu :index="menu.name" v-if="menu.child && menu.child.length > 0">
<template #title>
<el-icon v-if="menu.icon">
<component :is="menu.icon"></component>
</el-icon>
<span>{{ menu.name }}</span>
</template>
<!-- 多级嵌套菜单渲染 -->
<subMenu :menu="menuItem" v-for="(menuItem, index) in menu.child" :key="index" />
</el-sub-menu>
<!-- 一级菜单 -->
<el-menu-item v-else :index="menu.frontpath">
<el-icon v-if="menu.icon">
<component :is="menu.icon"></component>
</el-icon>
<span>{{ menu.name }}</span>
</el-menu-item>
</div>
</template>
<script setup>
const props = defineProps({
menu: {
type: Object,
default: {}
}
})
console.log(props.menu,'menu')
</script>
3、v-model绑定的值不要和ref绑定的值一样,这个不会报错,但是很难找到问题所在