vue-cli创建插件发布npm

Posted 2021-09-20 码上暴富

vue-cli创建插件发布npm

• vue-cli创建插件发布npm

vue-cli创建插件发布npm

1、先去npm官网注册个账号 https://www.npmjs.com/ 如果有账号就直接登录

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

3、开始写toast 插件

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

4、在新增的plugin > toast.vue组件中写入以下内容

//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组件添加测试，在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>

运行结果

测试没问题，接下来就开始编写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

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

在pageage.json中写入以下代码

{
  "name": "vue-toast-cls",
  "version": "0.1.0",
  "description": "vue-toast-cls cls",
  "private": false,
  "main": "lib/toast.umd.min.js",
  "keyword": "test",
  "author": "cls",
  "scripts": {
    "lib": "vue-cli-service build --target lib --name toast --dest lib  src/plugin/index.js"
  }
}

然后执行 npm run lib 命令，编译组件。以下是编译后的目录结构

7、开始发布

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

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

8、使用包
在新的vue-cli项目的main.js加入包并使用，然后执行cnpm i vue-toast-cls --save-dev 下载包（可能用npm 报错，cnpm没问题）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

import $toast from 'vue-toast-cls'
Vue.use($toast)

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

cnpm i vue-toast-cls --save-dev

在组件中使用

<template>
  <button @click="clickme">click me</button>
</template>
<script>
  export default {
    methods: {
      clickme () {
        this.$toast("hello")
      }
    }
  }
</script>

结果

如果样式没有引入成功，添加如下代码即可

module.exports = {
    lintOnSave:false, //关闭eslint 代码校验
    css: {
        extract: false
    }
}