Vue封装插件并发布到npm仓库

为什么要将插件发布到npm上？

1. 支持开源，优秀插件发布到npm上，更多人使用，集思广益，使代码的性能有更好的提升。
2. 重复代码免于多次重写，复用性高

将插件发布到npm仓库与将插件发布私服比较类似，步骤简单，如下。

一、封装组件

因为主要描述发布插件步骤，所以插件内容比较简洁。

文件位置：packaging_components\src\package\gray-rabbit-ui.vue。

<template>
  <div class="body">
      <section>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
       </section>
  </div>
</template>

<script>
export default {
    name: "RrayRabbitUi"
}
</script>

<style scoped>
    .body{
        perspective: 1000px;
    }
    section{
        width: 300px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        transform-style: preserve-3d;
        animation: rote 10s linear infinite;
        background-image: url(../assets/logo.png);
        background-size: 100% 100%;
    }
    section:hover{
        animation-play-state: paused;
    }
    section div{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(../assets/1.jpg);
        background-size: 100% 100%;
        
    }
    section div:first-child{
        transform: translateZ(300px);
    }
    section div:nth-child(2){
        transform: rotateY(60deg) translateZ(300px);
    }
    section div:nth-child(3){
        transform: rotateY(120deg) translateZ(300px);
    }
    section div:nth-child(4){
        transform: rotateY(180deg) translateZ(300px);
    }
    section div:nth-child(5){
        transform: rotateY(240deg) translateZ(300px);
    }
    section div:nth-child(6){
        transform: rotateY(300deg) translateZ(300px);
    }
    @keyframes rote{
        0%{
            transform: rotateY(0deg);
        }
        100%{
            transform: rotateY(360deg);
        }
    }
</style>

创建index.js文件

index.js文件是为了插件在下载之后可以在vue中使用Vue.use()使用，调用Vue.use()方法时，Vue会执行插件中install方法，进而将插件进行全局注册。

文件位置：packaging_components\src\package\index.js。

import RrayRabbitUi from './gray-rabbit-ui.vue'
const coms = [RrayRabbitUi]; //将来如果有其他组件，都可以写到这个数组里

// 批量组件注册
const install = function(Vue){
    coms.forEach((com)=>{
        Vue.component(com.name, com)
    })
}

export default install;//这个方法以后在使用的时候可以被use调用

二、打包组件

• 在package.json中添加一段打包命令，如下：

"package": "vue-cli-service build --target lib ./src/package/index.js --name gray-rabbit-ui --dest gray-rabbit-ui"

注解：

"package"：与“npm run dev”中的“dev”作用一致，将webpack打包命令赋值给"package",简化打包命令。

"--target"：要被打包的文件地址。

"--name"：打包的文件名称。

"--dest"：打包后的文件夹名称。

• 执行命令，将组件打包

npm run package

• 生成package.json文件

        此时项目文件列表中会打包生成一个gray-rabbit-ui文件夹，在集成终端打开文件夹，执行命令npm init -y即可生成package.json文件。

        生成此文件的目的是为了后续发布插件的时候找到要发布的插件的入口文件。

三、注册npm账号

• 打开npm网址

npm (npmjs.com)https://www.npmjs.com/

注册账号没有什么注意点，按照提示进行即可。

四、添加npm账号

在执行以下步骤之前注意将npm镜像切换到npm镜像源。

• 在集成终端打开gray-rabbit-ui文件夹（gray-rabbit-ui是打包好的插件文件夹），输入命令添加npm用户：

npm adduser

五、发布包

• 在集成终端打开gray-rabbit-ui文件夹（gray-rabbit-ui是打包好的插件文件夹），输入命令发布插件：

npm publish

在发布包的时候可能会遇到包名称重复报错，发包不成功问题，只需要在打包好的package.json文件中更改name名称即可。