vue3 应用element plus 实现菜单无限级_vue3 el-menu多级菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35191010/article/details/129982561

本文介绍了如何在Vue3项目中利用Element Plus实现多级菜单的功能。首先解释了Vue的基本概念，然后详细阐述了安装和引入Element Plus、unplugin-vue-define-options和vue-router的步骤。接着展示了菜单组件的父子结构，并最终展示运行结果。通过这些步骤，读者可以学会如何构建一个支持无限级菜单的Vue应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、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

一、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/c