在 Vue 组件中引入 vuedraggable 和 moment 库

在 Vue 组件中引入 `vuedraggable` 和 `moment` 库，可以采用以下方式：

1. 安装 `vuedraggable` 和 `moment` 包：

npm install vuedraggable moment --save

2. 在 Vue 组件中引入 `vuedraggable` 和 `moment` 库，并注册 `vuedraggable` 组件。

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

<script>
import draggable from 'vuedraggable';
import moment from 'moment';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [], // 数据列表
    };
  },
  mounted() {
    // 初始化数据列表
    this.list = [
      { id: 1, name: '数据1', date: moment().subtract(1, 'days').format('YYYY-MM-DD') },
      { id: 2, name: '数据2', date: moment().format('YYYY-MM-DD') },
      { id: 3, name: '数据3', date: moment().add(1, 'days').format('YYYY-MM-DD') },
    ];
  },
};
</script>

在上面的代码中，我们通过 `import` 关键字引入了 `vuedraggable` 和 `moment` 包中的 `draggable` 和 `moment` 对象，并在 Vue 组件的 `components` 选项中注册了 `draggable` 组件。在模板中，我们使用了 `<draggable>` 标签来使用 `draggable` 组件，通过 `v-model` 指令将数据列表绑定到组件上，并使用 `v-for` 指令将数据列表渲染出来。

需要注意的是，上面的代码只是引入了 `vuedraggable` 和 `moment` 库，并在 Vue 组件中使用了 `draggable` 组件和 `moment` 对象，具体使用方式还需要根据实际需求进行调整和优化。