标签：vue const ts element plus router import store

闲聊

前段时间小颖在B站找了个学习vue3+TS的视频，自己尝试着搭建了一些基础代码，在实现功能的过程中遇到了一些问题，为了防止自己遗忘，写个随笔记录一下嘻嘻

项目代码

git地址: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')

参考：记录-解决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-menu
      active-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();
//vuex
const 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>

subMenu.vue

 解决方案一：

修改 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'
import * as Icons from '@element-plus/icons-vue'
const app = createApp(App)

Object.keys(Icons).forEach(key => {
    app.component(key, Icons[key as keyof typeof Icons])
})
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

解决方案二：

将 main.ts 改回原来的

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
//公共css
import './assets/css/index.scss'

将subMenu.vue组件的 js 代码改为

import { defineComponent } from "vue";
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Menu,
    Grid,
  } from "@element-plus/icons-vue";
  import { useRouter } from "vue-router";
  import { useStore } from "vuex";
  export default defineComponent({
    components: {
      Document,
      Menu,
      Location,
      Setting,
      Grid,
    },
    props: {
      menuInfo: {
        type: Object,
        default: () => {
          return {
            id: "",
            parent_id: "",
            m_name: "",
            icon: "",
            childs: [],
          };
        },
      },
    },
    setup() {
      //路由
      const router = useRouter();
      //vuex
      const store = useStore();
      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 });
      };
      return {
        menuFun,
      };
    },
  });
</script>

参考哪里忘记了，第一种是面向百度的，第二种是小颖自己试出来的

后面的坑等后面写了再继续补充，最近小颖在忙着弄接的私活所以也没继续看vue3了，等这段时间忙完继续搞，

标签：vue,const,ts,element,plus,router,import,store
From： https://www.cnblogs.com/yingzi1028/p/16810866.html