Vue Draggable Next 项目教程

Vue Draggable Next 项目教程

vue.draggable.nextVue 3 compatible drag-and-drop component based on Sortable.js项目地址:https://gitcode.com/gh_mirrors/vu/vue.draggable.next

1. 项目的目录结构及介绍

vue.draggable.next/
├── dist/
│   ├── vuedraggable.umd.min.js
│   └── ...
├── examples/
│   ├── basic.html
│   └── ...
├── src/
│   ├── Draggable.vue
│   ├── index.js
│   └── ...
├── package.json
├── README.md
└── ...

• dist/: 包含编译后的文件，如 vuedraggable.umd.min.js。
• examples/: 包含示例文件，如 basic.html。
• src/: 源代码目录，包含主要组件 Draggable.vue 和入口文件 index.js。
• package.json: 项目配置文件，包含依赖和脚本。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js，该文件是项目的入口点，负责导出 Draggable 组件。

import Draggable from './Draggable.vue';

export default Draggable;

3. 项目的配置文件介绍

项目的配置文件是 package.json，该文件包含了项目的元数据、依赖和脚本。

{
  "name": "vue.draggable.next",
  "version": "1.0.0",
  "description": "Vue 3 compatible drag-and-drop component based on Sortable.js",
  "main": "dist/vuedraggable.umd.min.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "sortablejs": "^1.10.2"
  },
  "devDependencies": {
    "rollup": "^2.3.4",
    "rollup-plugin-vue": "^6.0.0",
    "vue": "^3.0.2"
  },
  "author": "",
  "license": "MIT"
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 主入口文件。
• scripts: 包含构建、开发和测试脚本。
• dependencies: 项目依赖，如 sortablejs。
• devDependencies: 开发依赖，如 rollup 和 rollup-plugin-vue。
• author: 作者信息。
• license: 许可证类型。

vue.draggable.nextVue 3 compatible drag-and-drop component based on Sortable.js项目地址:https://gitcode.com/gh_mirrors/vu/vue.draggable.next