发布vue组件npm包
其实很早之前就想尝试着写一写vue组件然后发布npm包，这次借着公司开发新项目，于是封装了一个Toast组件。
我封装的都是通过vue提供的方法去封装的，但其实从JavaScript的角度去实现或许会更简单，性能也可能更好，不过我只是封装vue组件，有大牛愿意指点的话感激不尽。
Vue.extend：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象，简单讲可以理解成继承。然后可以通过挂载$mount到一个元素上面。也可以通过new来声明这个构造器，这样的话跟new Vue是一样的。
首先在一个空文件夹里面npm init，初始化你想要发布的包。
我的项目结构：
外层的index.js：
import Toast from './lib/Toast'
export {
Toast
}
Toast里面main.vue：
<template>
<divv-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div>
</template>
<style scoped>
.wrap{
z-index: 100;
position: fixed;
left: 50%;
top:50%;
background: rgba(0,0,0,.6);
padding: 6px;
border-radius: 5px;
transform: translate(-50%,-50%);
color:#fff;
}
.fadein {
animation: in 0.5s;
}
.fadeout {
animation: out 0.5s;
opacity: 0;
}
@keyframes in {
0% {
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes out {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
</style>这边加了一点动画。
Toast里面的index.js：
import Vue from 'vue'
import main from './main'
const ToastConstructor = Vue.extend(main)
function Toast(text, duration = 2000) {
const toastDom = new ToastConstructor({
el: document.createElement('div'),
data() {
return {
text:text,
showWrap:true,
showContent:true
}
}
})
document.body.appendChild(toastDom.$el)
// 提前执行动画
setTimeout(() => {toastDom.showContent = false} ,duration - 1500)
setTimeout(() => {
toastDom.showWrap = false;
document.body.removeChild(toastDom.$el);
} ,duration)
}
export default Toast这个是重点，我们先创建构造器
const ToastConstructor = Vue.extend(main)我在方法里通过new来声明，我之前说过，这跟new Vue是一样的，没有是吗区别。可以打印出来看看。
el 是我们挂载的元素，new Vue的时候也需要有个挂载元素。当然也可以通过$mount来挂载，两个也没什么区别。
然后我发布到body上面，文字需要提前执行动画，否则这个标签用if直接就隐藏了。
这边要特别注意，我们在隐藏之后，要是再次调用这个组件，没有通过remove移除，页面会有很多注释的空标签。
还有一个注意的是，我每次执行这个方法都会实例化一个toastDom，有些就想着判断是否已经存在，存在就不实例化，可以是可以，但是这个就会出现一个问题就是不能同时触发这个弹窗。
还有一个要注意的，我这样的写法是每个组件都要import Vue，如果是多个组件的话建议把这些方法放到同一个js里面，这样就可以避免重复引入，但是我觉得不影响，可以根据个人习惯去写。
调用的话跟普通UI库一样：
引入：import {Toast} from './wade-ui'调用：Toast(‘弹窗’,4000);这就是简单封装的Toast的vue组件，后续会慢慢写一些组件，npm包地址：
https://www.npmjs.com/package/wade-ui
（完）