如何在Vue3项目中正确配置vue-burger-menu组件

原版vue-burger-menu仅适配Vue2，Vue3项目需使用适配版本@cjtimon/vue-burger-menu，以下是完整配置流程：

• 安装依赖
  执行安装命令：

  npm install @cjtimon/vue-burger-menu
  

  若使用yarn可执行：

  yarn add @cjtimon/vue-burger-menu
  

• 引入组件与样式
  在需要使用侧边栏的单文件组件中，引入对应动画效果的菜单组件和全局样式：

  <script setup>
  import { ref } from 'vue'
  // 可选动画类型：Slide / ScaleDown / FallDown / Reveal等
  import { Slide } from '@cjtimon/vue-burger-menu'
  import '@cjtimon/vue-burger-menu/dist/vue-burger-menu.css'
  
  // 控制菜单显隐的响应式变量
  const isMenuOpen = ref(false)
  </script>
  

• 编写模板代码

  <template>
    <!-- 自定义菜单触发按钮 -->
    <button @click="isMenuOpen = !isMenuOpen">
      切换菜单
    </button>
  
    <!-- 侧边栏组件 -->
    <Slide 
      :is-open="isMenuOpen" 
      @state-change="(state) => isMenuOpen = state.isOpen"
      width="280px"
      right
      disable-burger
    >
      <nav>
        <a href="/" class="menu-item">首页</a>
        <a href="/product" class="menu-item">产品</a>
        <a href="/news" class="menu-item">新闻</a>
        <a href="/about" class="menu-item">关于我们</a>
      </nav>
    </Slide>
  </template>
  

  配置说明：添加right属性可让侧边栏从右侧滑出，width属性自定义菜单宽度，disable-burger属性可隐藏默认自带的汉堡按钮，完全使用自定义的触发按钮。
• 添加自定义样式（可选）

  <style scoped>
  .menu-item {
    display: block;
    padding: 14px 24px;
    color: #222;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid #eee;
  }
  .menu-item:hover {
    background: #f8f9fa;
  }
  </style>
  

内容的提问来源于stack exchange，提问作者David Andor