vue3 应用element plus 实现菜单无限级

随着项目逻辑的细分，有些菜单不满足于只有一级菜单，二级菜单，因此衍生了多级菜单

目录

一、vue是什么？

二、使用步骤

1.安装element plus

2.安装  unplugin-vue-define-options

3.安装路由 vue-router

三.引入 element Plus、unplugin-vue-define-options、vue-router

1.在main.js 中引入 element plus

2.在vite.config.js 中引入unplugin-vue-define-options

3.在main.js中引入vue-router

四.菜单组件

1.菜单父组件

2.菜单子组件

五.运行结果

---

一、vue是什么？

       是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 (opens new window)结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、使用步骤

1.安装element plus

代码如下（示例）：

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2.安装  unplugin-vue-define-options

解决 vue中组件命名的问题

yarn add unplugin-vue-define-options

3.安装路由 vue-router

yarn add vue-router

三.引入 element Plus、unplugin-vue-define-options、vue-router

1.在main.js 中引入 element plus

import { createApp } from "vue";
import App from "./App.vue";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

import "./assets