【Vue3+Vite+Ts+element-plus】使用tsx实现左侧栏菜单无限层级封装

一、为什么我要用tsx封装左侧栏菜单

在我们日常开发中 有时候会经常遇到如下图这种多层级的菜单栏，如果单单只用原本的vue开发起来会比较麻烦，而如果使用tsx则可以在一个.vue文件中实现 任意层级的菜单栏 ，这就是tsx的灵活性

 

二、使用步骤

在使用tsx之前 我们要安装一些插件 使我们的项目支持tsx

1.安装

//下面3种安装方式选择一种 推荐pnpm
yarn add @vitejs/plugin-vue-jsx
//or
npm install @vitejs/plugin-vue-jsx -D
//or
pnpm install @vitejs/plugin-vue-jsx -D

2.配置

在 vite.config.ts 文件中挂载

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
 plugins: [ vueJsx()]
})

 tsconfig.json 文件中

{
  // include 需要包含tsx
"include": ["src/*", "src/**/*.vue", "src/**/*.tsx", "src/**/*.jsx", "src/**/*.ts", "src/**/*.js"],
 "compilerOptions": {
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
 }
}

三、tsx 任意层级菜单栏实现代码

新建AppAside.vue 文件 放入如下代码：