Encapsulate the vue3 entry animation plugin and publish it to npm

Prepare

vue create entry-animate

Only a simple project framework is needed, router\vuex is not needed;

Encapsulation process

Create a new package under the src directory, and the package folder is to store our packaged components;
It is also necessary to add an entry file, add an index.js file in the package, and register it as a global component when the main.js file is introduced later;
catalog image

I wrote a Vue3 animated entrance effect, which is a list, with the effect of gradient entry one by one. In fact, you can just write the components as you like. Corresponding file => package/entryList/ index.vue

<template>
  <div
    class="list-container gradientAnimation"
    :style="{ animationDelay: `${index * speed}ms` }"
  >
    <slot> </slot>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "entryList",
  // 注册你的组件
  props: {
    // 列表的下标
    index: {
      type: Number,
      default: 0,
    },

    // 出现的速度
    speed: {
      type: Number,
      default: 100,
    },
  },
  // 定义一个组件的 emitted 事件，当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。
});
</script>

<style scoped>
.gradientAnimation {
  animation-name: gradient;
  animation-duration: 0.85s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* 不带前缀的放到最后 */
@keyframes gradient {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
</style>

Once packaged, you can test it in the app file first
Directory: src/App.vue

<script setup>
import { reactive } from "vue";
import entryList from "./package/entryList/index.vue";

const list = reactive([
  1, 2, 3, 4, 5, 7, 8, 7, 4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5, 7, 8, 7,
  4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5, 7, 8, 7, 4, 5, 1, 2, 4, 4, 84,
  2, 1, 2, 1, 2, 3, 4, 5, 7, 8, 7, 4, 5, 1, 2, 4, 4, 84, 2, 1, 2, 1, 2, 3, 4, 5,
  7, 8, 7, 4, 5, 1, 2, 4, 4, 84, 2, 1, 2,
]);
</script>

<template>
  <div class="list-contaienr">
    <div class="" v-for="(item, index) in list" :key="index" v-entry="index">
      <entryList :index="index">
        <div class="item">
          {
     
     { item }}
        </div>
      </entryList>
    </div>
  </div>
</template>

<style scoped>
.list-contaienr {
  text-align: center;
  width: 100%;
  background: #c0c7b5;
}

.item {
  background-color: #fff;
  margin-bottom: 10px;
}

.gradientAnimation {
  animation-name: gradient;
  animation-duration: 0.85s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* 不带前缀的放到最后 */
@keyframes gradient {
  0% {
    opacity: 0;
    transform: translate(-100px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
</style>

To register a global component, use the Vueprovided installmethod. This method will Vue.use(plugin)be called when used, so that the component we need to export can be registered globally, and the exported component can be used directly in any component like a sub-component.

rc/package/index.js

import entryList from "./entryList/index.vue";

// --target lib 指定打包的目录
// --name 打包后的文件名
// --dest 打包后的文件夹名称

const componentArr = [entryList];

export default {
  install: (app) => {
    // 注册组件
    componentArr.forEach((item) => {
      app.component(item.name, item); // item.name就是引入组件中的name属性，所以每个组件都需要name
    });
  },
};

release

Modify the packaging configuration command package.json


// --target lib 指定打包的目录
// --name 打包后的文件名
// --dest 打包后的文件夹名称


  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/package/index.js --name entry-animate --dest entry-animate"
  },

Execute packaging command
```
npm run package
```
After the packaging is complete, an entry-animate folder will be generated in the same level directory as src. In fact, it corresponds to the name of --dest

cd to switch to the entry-animate directory. To initialize the package.json file, execute the command npm init -y to initialize the package.json file.
The specific configuration is as follows

{
  "name": "entry-animate",
  "version": "1.0.0",
  "description": "",
  "main": "entry-animate.common.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "private": false, // 是否设为私有包
  "license": "ISC"
}

Register an NPM account (you can skip this step if you have an npm account)

You can go to the npm official website to register: https://www.npmjs.com;
you can also register through the command line

First of all, you have to switch the npm image source to the official source. Most people's image source may be Taobao image source, and others will not work. If you want to publish, you have to switch to the npm official image source.
```
npm config set registry=https://registry.npmjs.org
```
register
```
npm adduser
```
Fill in your account, password, and email in order. After completing the filling, your email will receive a one-time password (that is, a verification code) sent by npm. Just fill it in again. If it has not been filled in, an error will be reported. Most of the time, it is necessary.
```
npm publish
```
Publish successful pictures
npm Chinese website official website and then go to npm to find my entry-animate package

use

Install
```
npm i entry-animate
```
Imported in main.js file
use

The specific effect, do not upload the video

Get it done, the release is complete, and you can pull the package from npm for project development in the future.

npm link entry-animate - npm