无需import/export，如何全局注册vuedraggable组件？

首先要明确两个核心问题：script引入顺序和全局注册的正确姿势，还要保证Vue与vuedraggable版本匹配：

• Vue2 对应 vuedraggable 2.x 版本
• Vue3 对应 vuedraggable 4.x 版本

步骤1：确保script引入顺序正确 #

必须按以下顺序引入，避免依赖加载问题：

<!-- Vue2 示例 -->
<script src="vue.js"></script>
<script src="sortable.min.js"></script>
<script src="vuedraggable.umd.min.js"></script>
<script src="vue-contentnavi.js"></script>

<!-- Vue3 示例 -->
<script src="vue.global.js"></script>
<script src="sortable.min.js"></script>
<script src="vuedraggable.umd.min.js"></script>
<script src="vue-contentnavi.js"></script>

步骤2：全局注册组件 #

你之前的错误是用Vue实例（navigation）的component方法注册，这是局部注册，无法在全局组件中使用。正确做法是用全局Vue对象（Vue2）或应用实例（Vue3）来注册：

Vue2 场景 #

在vue-contentnavi.js中先全局注册，再创建实例：

// vue-contentnavi.js
// 全局注册draggable组件（使用Vue全局对象）
Vue.component('draggable', VueDraggable);

// 创建你的Vue实例
var navigation = new Vue({
  el: '#your-app-container'
  // 其他实例配置
});

Vue3 场景 #

在vue-contentnavi.js中创建应用实例后，全局注册再挂载：

// vue-contentnavi.js
// 创建应用实例
const navigation = Vue.createApp({
  // 应用配置
});

// 全局注册draggable组件
navigation.component('draggable', VueDraggable);

// 挂载应用
navigation.mount('#your-app-container');

额外排查点 #

1. 确认全局变量名：如果注册后仍报错，打开浏览器控制台输入console.log(window)，查看vuedraggable实际暴露的全局变量（大部分版本是VueDraggable，少数可能是draggable），替换注册代码中的变量名即可。
2. 版本兼容性：如果前端出现红色异常，优先检查Vue和vuedraggable的版本是否匹配，比如Vue3不能用vuedraggable 2.x版本。

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