vue3开发踩坑记录

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绑定的值一样，这个不会报错，但是很难找到问题所在