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(){
    //逻辑
  }
}

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

toast插件

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

项目结构图

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

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

//vue-leilei-toast

//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中测试使用

点击按钮测试使用 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账号可以忽略这一步
https://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登陆成功
一切准备就绪，准备发包，
当确认项目已经编译成功（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
    }
}

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

css强制内联

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

2020-04-30 23:42

最近在负责平台公共组件的管理，将某些包抽象发布到npm，因为需要不断更新，所以对版本号要经常修改，特此记录版本号有关内容。

语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新

如果只是修复bug，需要更新Z位。
如果是新增了功能，但是向下兼容，需要更新Y位。
如果有大变动，向下不兼容，需要更新X位。

参考：https://www.cnblogs.com/xd502djj/p/7985633.html

2020-11-18 15：28

感叹时间过得真快呀，上次写三月份总结的时候给自己定了几个目标，现在看一下，没完成多少，哎真是哈哈（苦笑）。

四月份主要做了一些事情
1.上线博客第一版
2.学习巩固js原生一些知识（比如闭包，原型，继承，手写bind等）
3.对vue更深入的学习了一些。（本来大言不惭的说四月份学vue全家桶以及源码呢）
4.一共在发布十篇文章，当然都只是简单的学习记录，想要写好文章得自己先有知识储备，还得花时间酝酿。

五月份计划（不一定五月干，能想到还有一些需要做的事情）

1.深入学习vue全家桶（哈哈哈）
2.学习小程序。（将域名升级为https）
3.学习react。
4.做一个自己的小程序（功能简单，主要体验小程序流程）
5.使用react技术栈做一个移动web版博客，并解析一个m.的子域名并上线。
6.学习一些云开发知识。
7.补充一些博客有趣的功能。（加一些必要的接口）
8.博客后台管理系统。

五一假期到了，想到再补充吧，好好休息，好好学习。

2020-05-01 00:01