vue-cli3 开发插件并发布到npm

本篇文章主要是记录自己学习思路

1、先去npm官网注册个账号 https://www.npmjs.com/ 如果有账号就直接登录哈~
登录进去之后，点自己的图像下拉菜单，有个package选项，查看自己上传了多少个包；

packages.png

哈哈 ~目前是0个；

2、根据vue-cli3的官方文档创建一个项目；

新建的项目目录.png

3、开始写toast 插件
目录如下：

toast.png

一般插件都写在一个文件夹里面，什么文件夹放在那里随便~

4、详细展开plugin toast组件

//toast.vue文件代码
<template>  

    <div class="toast" v-if="isShow" :class="showContent ?'fadein':'fadeout'">{{message}}</div>

</template>
<script>
export default {
    data(){
        return {
            message:'嗨~',
            isShow:false,
            showContent:false
        }
    }
}
</script>
<style scoped >
    
    .toast {
        position: fixed;
        left: 50%;
        top:50%;
        background: rgba(0,0,0,.35);
        padding: 10px;
        border-radius: 5px;
        transform: translate(-50%,-50%);
        color:#fff;
    }

    .fadein {
        animation: animate_in 0.25s;
    }
    .fadeout {
        animation: animate_out 0.25s;
        opacity: 0;
    }
    @keyframes animate_in {
        0% {
        opacity: 0;
        }
        100%{
        opacity: 1;
        }
    }
    @keyframes animate_out {
        0% {
        opacity: 1;
        }
        100%{
        opacity: 0;
        }
    }
    
     
</style>

index.js 文件代码

import  toastComponent from './toast.vue';
 
let toast = {}
toast.install = function(Vue,options){

    let toastConsTructor = Vue.extend(toastComponent);
    Vue.prototype.$toast = function(text,duration = 2000){
        let toastDom = new toastConsTructor({
            el:document.createElement('div'),
            data(){
                return {
                    message:text,
                    isShow:true,
                    showContent:true
                }
            }
        }) 
        document.body.appendChild(toastDom.$el)
        let outduration = duration - 1250;
        setTimeout(() => {toastDom.showContent = false},outduration)
        setTimeout(()=>{toastDom.isShow = false},duration)
    }
}

export default toast;

这样插件就写好了，我们开始本地测试

5、本地先测试

我直接用components 目录下面的HelloWorld.vue组件添加测试，如下是我修改的代码

<template>
  <div class="hello"> 
      <button @click="showFn"> 点击</button>
  </div>
</template>

<script>
import Vue from 'vue'
import toastTest from '../plugin'
Vue.use(toastTest)
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }, 
  methods:{
    showFn(){
       this.$toast('嗨，欢迎一起来学习')
    }
  }
}
</script>
 
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

测试toast组件.png

基本上测试这个插件是没什么问题，接下来就开始编写package.json文件相关配置打包上传到npm

6、打包组件

vue-cli 3 的官方文档有打包库的相关配置库打包相关命令官方入口
主要需要四个参数：
1，target: 默认为构建应用，改为 lib 即可启用构建库模式
2，name: 输出文件名
3，dest: 输出目录，默认为 dist，这里我们改为 lib
4，entry: 入口文件路径，默认为 src/App.vue，这里改为 src/plugin/index.js

// pageage.json

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name toast --dest lib  src/plugin/index.js"
  }
}
然后执行 npm run lib 命令，编译组件

编译后lib目录.png

7、package.json文件配置

首先需要在 package.json 添加组件信息
name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
keyword：关键字，以空格分割；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。

//配置如下
  "name": "vue-toast-tests",
  "version": "0.1.0",
  "description": "vue-toast-tests test",
  "private": false,
  "main": "lib/toast.umd.min.js",
  "keyword": "test",
  "author": "zds_dawson",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name toast --dest lib  src/plugin/index.js"
  },

8、开始发布

如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来
npm config set registry http://registry.npmjs.org
如果没有 npm 账户，可以通过** npm adduser** 命令创建一个账户，或者到 npm 官网注册
如果在官网注册的账户，或者以前就有账户，就使用** npm login** 命令登录；

1，cmd打开项目所在目录，然后输入登录命令 npm login
2，根据返回信息输入你的用户名，密码，邮箱（这些信息都在注册npm账号的时候填写的）
3，然后提示登录成功，我们可以用 npm whoami 命令查看当前操作用户

cmd登录命令操作.png

4，然后再确保项目已经编译成功的情况下（运行npm run lib 命令）输入npm publish 发布npm包
5，如果想发布迭代版本，首先要 npm version patch 命名改变package.json文件里面的version版本信息
然后再npm publish 发布包
6，删除包执行 npm unpublish --force ；npm会根据package.json的version删除该version的包版本

E:\project\vue-toast-tests>  npm publish //如果发布成功会有如下图提示，同时也会发一封邮件到你刚刚填写的邮箱

图片.png

7，发布成功后，可以去npm 官网查看自己发布的包

包.png

9、使用包
再main.js加入包并使用，然后执行cnpm i vue-toast-tests --save-dev 下载包（我电脑用npm 报错，cnpm没问题）

import Vue from 'vue'
import App from './App.vue'
import toast from 'vue-toast-tests' //引入包
Vue.use(toast) //使用包
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

E:\project\vue-toast-tests> cnpm i vue-toast-tests --save-dev //下载包

测试包.png

测试toast.png

点击下没问题整个流程就结束了~

问题区

我再发布包的时候有个问题，就是toast.vue文件里的style 加了scoped之后，发布包之后，没有样式，删除掉就好了

问题，没有样式.png

补丁.png

扩展部分
vue.config.js配置参考地址 vue-cli 3 配置官方文档

//vue.config.js 这个文件是功能配置扩展文件，一定要放在项目的根目录（跟package.json同级）下面，这样才能生效 
module.exports = {
    lintOnSave:false //关闭eslint 代码校验
}