封装 vue3 入场动画 插件 并发布到 npm

准备

vue create entry-animate

只需要简单的项目框架即可，router\vuex 都不用；

封装过程

1. src 目录下新建 package，package文件夹是存放我们封装的组件的；
2. 还需要加一个入口文件，在 package 中加一个 index.js 文件，通过后期引入main.js 文件的时候，注册成全局组件；
3. 目录图片
   
4. 我写了一个 Vue3 的动画入场效果，就是一个列表，一项一项的渐变进入的效果，其实组件随便写就好了，开心就行 对应的文件 =>  package/entryList/index.vue 

5. 封装好了，可以先在 app 文件中进行测试
   目录：src/App.vue

6. 注册全局组件，使用Vue提供的install方法，这个方法会在使用Vue.use(plugin)时被调用，这样就能让我们需要导出的组件注册到全局, 就可以在任意组件中像使用子组件一样直接使用导出的组件
   
   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
       });
     },
   };
   

   发布

7. 修改打包配置命令 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"
     },

8. 执行打包命令

   npm run package
   

9. 打包完成之后，会在src 同级目录下生成一个 entry-animate 的文件夹。其实对应的就是 --dest 的 名字了
   
10.  cd 切换到 entry-animate 目录下。初始化 package.json 文件,执行命令 npm init -y 初始化 package.json 文件即可
    具体的配置如下

    {
      "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"
    }

注册 NPM 的账号（有npm账号可跳过此步）

1. 可去npm官网注册: https://www.npmjs.com；
   也可以通过命令行注册

   首先得将npm镜像源切换为官方的源，大部分人的镜像源可能为淘宝镜像源，其他的也不行，想发布就得切换为npm官方镜像源

   npm config set registry=https://registry.npmjs.org
   

   注册

   npm adduser
   

   依次填入账号、密码、邮箱, 填写完成后邮箱会收到一个npm发的一次性密码(也就是验证码) 再次填入即可，如果还未填写就报错，多半是得需要

2. npm publish
   

   
   发布成功的图

3. npm中文网 官网  然后去 npm 上查找一下自己发的包 我的 entry-animate 
   

使用

1.  安装

   npm i entry-animate

   
2.  mian.js 文件中引入
   
3. 使用
   
   

 具体的效果,就不上传视频了

 搞定收工，这样发布就完成了，以后就能从npm 拉包进行项目开发了

npm 链接 entry-animate - npm