v-show-slide 项目教程

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

v-show-slide/
├── dist/
│   ├── v-show-slide.umd.js
│   ├── v-show-slide.esm.js
│   ├── v-show-slide.min.js
│   └── index.d.ts
├── src/
│   ├── index.ts
│   └── ...
├── package.json
├── README.md
├── rollup.config.js
└── ...

• dist/：包含编译后的文件，如UMD、ESM和最小化的JS文件，以及类型定义文件。
• src/：源代码目录，包含项目的主要代码。
• package.json：项目的配置文件，包含依赖、脚本等信息。
• README.md：项目的说明文档。
• rollup.config.js：Rollup的配置文件，用于打包项目。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.ts，这是整个项目的入口文件。它定义了Vue指令 v-show-slide，用于实现元素的高度动画效果。

// src/index.ts
import Vue from 'vue';
import { VShowSlide } from './v-show-slide';

Vue.directive('show-slide', VShowSlide);

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的基本信息、依赖、脚本等配置。

{
  "name": "v-show-slide",
  "version": "1.8.3",
  "description": "Vue.js directive for animating element to and from height: auto in a sliding motion",
  "main": "dist/v-show-slide.umd.js",
  "module": "dist/v-show-slide.esm.js",
  "unpkg": "dist/v-show-slide.min.js",
  "types": "dist/index.d.ts",
  "author": "Peter Hegman",
  "license": "GPL-3.0",
  "keywords": [
    "Vue.js",
    "Vue",
    "animate",
    "v-show-slide",
    "v-show",
    "height auto",
    "css animations",
    "easing",
    "easings",
    "directive",
    "slide up",
    "slide down",
    "slideUp",
    "slideDown"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/phegman/v-show-slide.git"
  },
  "devDependencies": {
    "@types/jest": "^24.0.18",
    "vue-loader": "^15.7.1",
    "vue-property-decorator": "^8.2.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  },
  "scripts": {
    "build": "rimraf dist & yarn build:umd & yarn build:esm & yarn build:iife & yarn build:demo",
    "build:umd": "rollup --format umd --file dist/v-show-slide.umd.js --config",
    "build:esm": "rollup --format esm --file dist/v-show-slide.esm.js --config",
    "build:iife": "rollup --format iife --file dist/v-show-slide.min.js --config",
    "build:demo": "webpack --mode production",
    "lint": "./node_modules/.bin/eslint src/**/*.{vue,ts}",
    "dev": "webpack-dev-server --mode development",
    "test": "jest"
  },
  "dependencies": {},
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}