vue3 安装vuedraggable 并且使用

Vue 3是一种流行的JavaScript框架，用于构建用户界面。Vuedraggable是一个基于Vue的拖放库，用于实现可拖动和排序的列表。下面是安装vuedraggable并使用的步骤：

1. 首先，确保你已经安装了Vue 3。你可以通过以下命令来安装Vue CLI并创建一个新的Vue项目：

npm install -g @vue/cli
vue create my-project

2. 进入到项目目录，并安装vuedraggable。你可以通过以下命令来安装：

cd my-project
npm install vuedraggable

3. 在你的Vue组件中引入vuedraggable。在需要使用拖放功能的组件中，添加以下代码：

import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  // ...
}

4. 在模板中使用vuedraggable。在你的模板中，使用`draggable`标签来包裹需要拖放的元素，如下所示：

<template>
  <div>
    <draggable v-model="list">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

在上面的例子中，`list`是一个数组，用于存储拖放元素的数据。通过`v-model`指令将`list`与`draggable`组件进行绑定。

5. 在你的Vue组件中定义`list`数组。在你的Vue组件中，定义一个`list`数组，并初始化一些数据，如下所示：

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  // ...
}

这样，你就可以在你的Vue应用中使用vuedraggable来实现拖放和排序的列表了。