Vue3.x+element-plus+ts踩坑笔记 _生活百科

闲聊前段时间小颖在B站找了个学习vue3+TS的视频，自己尝试着搭建了一些基础代码，在实现功能的过程中遇到了一些问题，为了防止自己遗忘，写个随笔记录一下嘻嘻
项目代码git地址:vue3.0-ts-element-plus--demo" rel="external nofollow noreferrer">vue3.x-ts-element-plus--demo
踩坑集合：1.根据 element-plus 官网提示按需引入组件后，遇到：ElLoading、ElMessage、ElNotification、ElMessageBox 样式丢失起因是小颖在封装 axios 时，发现引入的 ElNotification 组件没有样式，表单提交时加载 ElLoading 组件有没有样式，后来通过面向百度解决了该问题，嘻嘻
解决方案一：第一步：执行下面代码
npm i unplugin-element-plus -D第二步：在 vue.config.js 改为
const { defineConfig } = require('@vue/cli-service')const AutoImport = require('unplugin-auto-import/webpack')const Components = require('unplugin-vue-components/webpack')const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), require('unplugin-element-plus/webpack')({ // options }), ], },})解决方案二：直接全局引入 element-plus
第一步：修改 main.ts
import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementPlus from 'element-plus'import 'element-plus/es/components/button/style/css'createApp(App).use(store).use(router).use(ElementPlus).mount('#app')【Vue3.x+element-plus+ts踩坑笔记】参考：记录-解决element-plus自动引入后ElLoading、ElMessage、ElNotification、ElMessageBox样式丢失的问题
2.动态使用图标组件时，图标组件不能正确渲染起因是小颖在封装菜单组件时，要动态遍历菜单数据根据数据中的 icon 值，通过：
<component :is="menuInfo.icon" class="menu-icon" />动态渲染各自的菜单图标，但是没有渲染出来，通过F12发现渲染出来的dom就不是图标组件的dom，而是这样的：
当前 menuInfo.icon 值为：setting

文章插图
左侧菜单组件因考虑到菜单可能不止两级可能会是多级的所以小颖将其封装成以下组件：

文章插图

文章插图
<template><div class="logo-box">XXXX管理系统</div><div class="menu-box"><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical":default-active="menuActive":unique-opened="true"text-color="#fff"@open="handleOpen"@close="handleClose"><template v-for="menu in menuList" :key="menu.id"><subMenu :menuInfo="menu" /></template></el-menu></div></template><script lang="ts" setup>import { defineProps, computed } from "vue";import { useStore } from "vuex";import SubMenu from "./subMenu.vue";const store = useStore();const props = defineProps({menuList: {type: Array,default: () => [],},});const menuActive = computed(() => {return store.state.setting.menuActive;});const handleOpen = (key: string, keyPath: string[]) => {console.log(key, keyPath);};const handleClose = (key: string, keyPath: string[]) => {console.log(key, keyPath);};</script><style lang="scss" scoped>.logo-box {height: 80px;display: flex;justify-content: center;align-items: center;font-size: 20px;cursor: pointer;background-color: #545c64;color: #fff;// background: v-bind(themeBackground);}.menu-box {height: calc(100vh - 80px);background-color: #545c64;}.el-menu-vertical {border-right: none;}.el-menu-vertical:not(.menu--collapse) {min-height: 400px;}</style>leftMenu.vue

文章插图

文章插图
<template><el-sub-menu v-if="menuInfo.childs.length > 0" :index="menuInfo.id"><template #title><el-icon :size="18"><component :is="menuInfo.icon" /></el-icon><span>{{ menuInfo.m_name }}</span></template><template v-for="item in menuInfo.childs" :key="item.id"><sub-menu :menu-info="item" /></template></el-sub-menu><el-menu-item v-else :index="menuInfo.id"@click="menuFun(menuInfo, menuInfo.id)" ><el-icon :size="18"><component :is="menuInfo.icon" class="menu-icon" /></el-icon><span>{{ menuInfo.m_name }}</span></el-menu-item></template><script lang="ts" name="SubMenu" setup>import {Document,Menu as IconMenu,Location,Setting,Menu,Grid,} from "@element-plus/icons-vue";import { defineProps } from "vue";import { useRouter } from "vue-router";import { useStore } from "vuex";//路由const router = useRouter();//vuexconst store = useStore();const props = defineProps({menuInfo: {type: Object,default: () => {return {id: "",parent_id: "",m_name: "",icon: "",childs: [],};},},});const menuFun = (event: any, index: string) => {setNav(event);store.dispatch("setMenuActive", { menuActive: index });if (event.url && event.url.length > 0) {router.push({path: event.url,query: {},});}};const setNav = (item: any) => {store.dispatch("setNav", { nav: item });};</script>