未使用Webpack，通过外部脚本引入Vue后如何使用vue-context-menu？

问题背景 #

我没有使用Webpack这类构建工具，而是通过外部脚本直接引入Vue：

<script src="https://unpkg.com/vue@latest"></script>

之后我想使用vue-context-menu这个npm模块，所以也通过CDN引入了它：

<script src="https://unpkg.com/vue-context-menu@2.0.6/vue-context-menu.js"></script>

不过我习惯用import contextMenu from 'vue-context-menu'的方式来使用，但这样写会报错，请问这种场景下该怎么正确使用这个组件？

解决方案 #

别担心，在CDN引入的场景下，这个组件不会通过ES模块的import来加载，而是直接挂载到全局作用域中，你可以按照下面的步骤来操作：

• 注册全局组件
  在创建Vue实例之前，先把组件注册到Vue全局：

  // CDN引入后，组件会挂载到window对象下的VueContextMenu变量
  Vue.component('vue-context-menu', window.VueContextMenu)
  

  （注：部分CDN版本的组件会自动完成全局注册，不过手动注册能避免环境差异导致的问题）

• 在模板中使用组件
  接下来就可以在你的Vue模板里直接使用这个组件了，示例如下：

  <div id="app">
    <!-- 右键触发菜单的元素 -->
    <div 
      @contextmenu.prevent="toggleMenu" 
      style="width: 200px; height: 200px; background: #eee; line-height: 200px; text-align: center;"
    >
      右键点击打开菜单
    </div>
    <!-- 上下文菜单组件 -->
    <vue-context-menu 
      :show="isMenuVisible" 
      :menu-data="menuOptions" 
      @hide="isMenuVisible = false"
    ></vue-context-menu>
  </div>
  

• 编写Vue实例逻辑
  最后补充对应的逻辑代码，控制菜单的显示和选项的点击事件：

  new Vue({
    el: '#app',
    data() {
      return {
        isMenuVisible: false,
        menuOptions: [
          {
            label: '复制',
            action: () => {
              console.log('执行复制操作')
            }
          },
          {
            label: '删除',
            action: () => {
              console.log('执行删除操作')
            }
          },
          {
            label: '查看详情',
            action: () => {
              console.log('查看详情')
            }
          }
        ]
      }
    },
    methods: {
      toggleMenu() {
        this.isMenuVisible = true
      }
    }
  })
  

简单来说，CDN引入的模块会直接暴露全局变量，你只需要找到对应的全局变量，按照Vue的全局组件注册方式处理，就能正常使用啦。

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