vue3中安装vue-Moveable

在Vue 3中安装`vue-Moveable`这个库可以让你方便地添加拖拽功能。`vue-Moveable`是一个Vue组件，它封装了`SortableJS`库，使得在Vue项目中实现列表的拖拽排序变得简单。以下是在Vue 3项目中安装和使用`vue-Moveable`的步骤：

1. 首先，确保你已经在项目中安装了Vue 3。

2. 然后，你可以使用npm或者yarn来安装`vue-Moveable`：

使用npm:

npm install vue-moveable --save

或者使用yarn:

yarn add vue-moveable

3. 接下来，在你的Vue组件中引入`vue-Moveable`并使用它。你可以通过在`<script setup>`中使用`defineComponent`来定义你的组件，然后在`components`中注册`Moveable`组件。

<template>
  <div>
    <Moveable v-model="list" direction="horizontal">
      <div v-for="(item, index) in list" :key="index" class="draggable-item">
        {{ item }}
      </div>
    </Moveable>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Moveable } from 'vue-moveable';

const list = ref(['Item 1', 'Item 2', 'Item 3']);

// 如果你使用的是 TypeScript，你可能需要声明类型：
// const list = ref<string[]>(['Item 1', 'Item 2', 'Item 3']);
</script>

<style>
.draggable-item {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}
</style>

在这个例子中，我们创建了一个可拖拽的列表，并且可以通过拖拽来改变列表中元素的顺序。