vue-cli3自定义插件并发布到npm主要是记录体验使用Vue CLI3自定义插件并发布到npm，然后在项目里下载使用

主要是记录体验使用Vue CLI3自定义插件并发布到npm，然后在项目里下载使用的一个过程。

大纲

写一个简单的插件(写插件注意事项)
打包库的相关配置
注册npm，登录npm
发布流程
删除已上传包（短时间内上传的包）
删除已上传较长时间的包

npm unpublish --force //强制删除，这个是撤销24小时发布的包，有些包发布久了，这个方法不会再管用了。
npx force-unpublish package-name '原因描述' //是删除已经发布好的包

版本更新发布时操作。
发布成功下载使用时样式丢失问题。

一、写一个简单的插件

官方文档是这么说的： Vue.js的插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。

MyPlugin.install = function(Vue){
  //1. 添加全局方法
  Vue.myGlobalMethod = function(){
    //逻辑...
  }
  //2. 添加全局资源
  Vue.directive('my-directive',{
    bind(el,binding,vnode,oldVnode){
      //逻辑...
    }
  })
  //3. 注入组件选项
  Vue.mixin({
    created:function(){
      //逻辑...
    }
  })
  //4. 添加实例方法
  Vue.prototype.$myMethod = function(){
    //逻辑
  }
}

然后就在上面几种创建插件的方法中根据需求写一个插件。需求：写一个提示框当点击按钮时给一个提示状态，之后会自动隐藏。预览：

本插件使用vue-cli3脚手架搭建：

将脚手架自动生成的多余代码去掉，在src中新建lib文件夹，

然后在lib文件夹下创建 .vue .js .css文件。

//vue-leilei-toast
<template>
  <div>
    <transition name="fade">
      <div v-show="show" class="toast">{{message}}</div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "leilei-toast",
  components: {},
  data() {
    return {
      message: "hello world",
      show: false
    };
  },

  computed: {},

  watch: {},

  methods: {
  },

  created() {},

  mounted() {}
};
</script>
<style lang='scss'>
@import url("index.css");
</style>

//index.js
import Toast from './vue-leilei-toast.vue';

var ToastPlugin = {};

ToastPlugin.install = function(Vue,options){
    var ToastConstructor = Vue.extend(Toast);
    var ToastInstance = new (ToastConstructor);
    var div = document.createElement('div');
    ToastInstance.$mount(div);
    document.body.appendChild(ToastInstance.$el);

    Vue.prototype.$toast = function(msg,duration=2000){
        ToastInstance.message = msg;
        ToastInstance.show = true;
        setTimeout(()=>{
            ToastInstance.show = false
        },duration)
    }
}
export default ToastPlugin

/* css */
.toast{
    position: fixed;
    top: 50%;
    left: 50%;
    background: rgba(0,0,0,.5);
    padding: 10px 40px;
    border-radius: 8px;
    color: #fff;
    transform: translateX(-50%);
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

此时可以在本地测试一下。在main.js中引入并使用

import toast from './lib/index.js';
Vue.use(toast);

在App.vue中测试使用

<template>
  <div id="app">
    <button @click="opentoast()">我是个按钮</button>
  </div>
</template>
<script>
export default {
  methods:{
    opentoast(){
       this.$toast("hello world",1000)
    }
  }
}
</script>

点击按钮测试使用 em...没问题。

二、打包组件

vue 打包组件相关配置文档：构建目标-库在package.json中做相关配置

主要配置有四个参数：

target:默认为构建应用，改为lib即可启用构建库模式

name:输出文件名

dist:输出目录，默认为dist，可以修改我们改为lib

entry:入口文件路径，默认为src/App.vue,我们修改为src/lib/index.js

//package.json
{
  "scripts":{
    "lib":"vue-cli-service build --target lib --name leilei-toast --dest lib src/lib/index.js"
  }
}

接着运行npm run lib命令打包组件

打包后的文件结构图

打包后控制台输出

然后在package.json中配置组件信息

name:包名，该名不能和npm上已有包重名，如何验证自己的包名是否会和npm上的包冲突？直接去npm上搜想定义的包名。 version：版本号，不能和历史版本号相同。 description：简介 main：入口文件 keyword：关键字，以空格分隔 author：作者 private：是否私有，需修改为false，否则发布失败 license：开源协议

package.json配置如下

{
  "name": "vue-mstian-toast", //给自己的包起一个响亮的名字 哈哈
  "version": "0.1.0", //版本号这块可以专门搜搜一些文章看看
  "description": "vue-mstian-toast test", //描述
  "main": "lib/leilei-toast.umd.min.js", //入口文件需要选择能支持模块化的文件具体可以查看打包后的文件后缀然后查阅相关资料
  "keyword": "leilei vue toast test",
  "author": "Mstian",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name leilei-toast --dest lib src/lib/index.js" //构建库的命令
  },
}

三、注册登录npm账号

如果已有npm账号可以忽略这一步 www.npmjs.com/ 官网注册即可。登录注册成功后点击右上角头像下拉菜单有个Packages选项，当然如果没有上传过npm包的时候当然是0 packages.

四、发布

如果修改过npm的镜像地址比如使用了淘宝镜像，就先改回来，npm config set registry http://registry.npmjs.org

cmd打开项目所在目录，输入登录命令 npm login
根据提示信息输入用户名，密码，邮箱。（注意：输入密码的时候命令面板不提示也没有占位符，感觉好像没有输入东西一样，其实已经输入了，接着输入完整密码下一步即可）
登陆成功后会有提示 Logged in as name on http://registry.npmjs.org，此时可以使用npm whoami查看当前操作用户
一切准备就绪，准备发包，当确认项目已经编译成功（npm run lib成功）输入npm publish。
不出意外这种操作是可以发布成功的。如果发布成功会在命令行显示+ 包名@版本号，然后注册的邮箱也会受到一条邮件。
发布成功之后就可以去npm官网查看自己发布的包，如果是第一次发包，那么Packages下会有一个包。
使用包跟使用npm上的包流程一样先安装，再在main.js中引入，使用Vue.use()方法使用。之后就可以愉快的使用此插件啦。

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import toast from './lib/index.js';
Vue.use(toast);
new Vue({
  render: h => h(App)
}).$mount('#app')

在组件中使用

this.$toast("hello world",1000)。

五、六、删除包

删除近期上传的包

npm unpublish --force //强制删除，npm会根据package.json的version删除该version的包版本。这个是撤销24小时发布的包，有些包发布久了，这个方法不会再管用了。

删除存在线上比较久的包

npx force-unpublish package-name '原因描述' //是删除已经发布好的包

使用此方法删除包之后，包还会存在Packages列表中，不过点击进去会有提示。

如果删除了包重新上传之前的包的时候可能会失败，这个时候改一下包名试试。

七、更新迭代版本操作

在命令行输入npm version patch命令改变版本号。然后再npm publish。具体的版本号管理参考文章如何更新自己写的npm包（模块），假设已经在npm中发布了一个1.0.0版本的包

八、下载安装包使用时样式丢失问题

通过查找资料发现有的说将.vue文件中的style标签中的scoped删除掉就好了，可以试试，我也出现样式丢失问题了，这么操作不好使。

我默认将css样式写在了.vue文件style标签里面，然后样式丢失，之后我又将样式拿出来放在一个.css文件里。然后在vue.config.js做了如下配置。强制内联css。有人知道原因的话可以在评论区留言交流。

module.exports = {
    css:{
        extract:false
    }
}

这样再打包上传之后就有样式了，具体原因不详，官网有一段说明，没咋理解。

The End 我写的插件源码：github.com/Mstian/vue-…

vue-cli3自定义插件并发布到npm