【亲测免费】 Vue Smooth DnD 项目教程

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

Vue Smooth DnD 项目的目录结构如下：

vue-smooth-dnd/
├── demo/
├── src/
│   ├── components/
│   ├── index.js
│   └── utils/
├── .babelrc
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

目录介绍

• demo/: 包含项目的演示代码。
• src/: 包含项目的主要源代码。
  • components/: 包含 Vue 组件。
  • index.js: 项目的入口文件。
  • utils/: 包含工具函数。
• .babelrc: Babel 配置文件。
• .eslintignore: ESLint 忽略配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。这个文件是 Vue Smooth DnD 库的入口点，负责导出库的主要功能和组件。

// src/index.js
import Container from './components/Container.vue';
import Draggable from './components/Draggable.vue';

const VueSmoothDnD = {
  Container,
  Draggable
};

export default VueSmoothDnD;

文件介绍

• Container.vue: 拖放容器组件。
• Draggable.vue: 可拖放组件。

3. 项目的配置文件介绍

.babelrc

Babel 配置文件，用于配置 JavaScript 的转译规则。

{
  "presets": ["@babel/preset-env"]
}

.eslintignore

ESLint 忽略配置文件，指定哪些文件或目录不需要进行代码检查。

node_modules
dist

.eslintrc.js

ESLint 配置文件，用于配置代码检查规则。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

.gitignore

Git 忽略配置文件，指定哪些文件或目录不需要进行版本控制。

node_modules
dist

package.json

项目依赖和脚本配置文件。

{
  "name": "vue-smooth-dnd",
  "version": "1.0.0",
  "description": "Vue wrapper components for smooth-dnd",
  "main": "src/index.js",
  "scripts": {
    "build": "webpack",
    "demo": "webpack-dev-server --open"
  },
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-dev-server": "^3.8.0"
  }
}

yarn.lock

Yarn 锁定文件，用于确保项目依赖的版本一致性。

以上是 Vue Smooth DnD 项目的目录结构、启动文件和配置文件的介绍。希望这些信息能帮助你更好地理解和使用这个开源项目。