VUE自定义插件库及NPM集成
一、如何封装VUE插件
1. 插件与组件
组件:对某功能或某模块的封装
插件:对一系列组件的封装
关系:插件可以封装组件,组件暴露数据给插件
2. 插件的优点
-
开箱即用
-
功能比组件更强大,更丰富
-
一次引入,终生受益
-
打包带走,随走随用
3. 插件分类
install ,vue实例,mixin(vue3.0已不推荐使用),directive
4. 插件实现
-
src目录下创建plugins文件夹
-
plugins文件夹下创建组件文件夹,如msg
-
msg下创建msg.vue(组件的完整模板)
<template>
<div class='msg' ref='msg' :class="{active: msgStatus}">
<div class="msg-warpper">{{text}}</div>
</div>
</template>
<script>
export default {
name: 'vue-msg',
props: {
msg: String
},
data() {
return {
text: '',
msgStatus: false
}
},
methods: {
msgPlugin(msg, time=2000) {
this.text = msg;
this.msgStatus = true;
setTimeout(() => {
this.msgStatus = fasle;
}, time)
}
}
}
</script>
<style scoped>
</style>
- plugins下创建index.js入口文件
import msg from './msg/msg.vue'
let plugin = []
plugin.install = function(Vue) {
Vue.prototype.$msg = "我是个全局属性"
Vue.prototype.$myMythod = () => {
console.log("我是个全局方法")
}
// 自定义指令
Vue.directive('focus'. {
bind: function() {},
inserted: function(el) { // 当el被插入到页面时触发
el.focus()
}
})
Vue.component(msg.name, msg)
}
export default plugin
const requireComponent = require.context('./', true, /\.vue$/) //目录,是否匹配子文件夹,文档类型
const install = (Vue) => {
if (install.installed) return
install.installed
requireComponent.keys().forEach(filname => {
const config = requireComponent(fileName)
const componentName = config.default.name
Vue.component(componentName, config.default || config)
})
Vue.directive('focus'. {
bind: function() {},
inserted: function(el) {
el.focus()
}
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install
}
- Main.js引入并全局注册
import vueMsg from './plugins/index.js'
Vue.use(vueMsg)
- 组件中使用插件库中的插件
<vue-msg ref="msg"></vue-msg>
this.$refs.msg.msgPlugin("test", 2000)
二、集成到npm
- 配置packag.json
"name": "vue-plugins-demo", // 插件名称
"private": false, // 是否私有,一定改为非私有false
"description": "", // 插件描述
"license": "MIT", // 开源协议
"main": 'lib/vue-plugins-demo.umd.min.js' // 入口文件,打包后lib文件夹下
"script": {
// target:打包目标路径;name:插件名称;dest:打包入口文件
"lib": "vue-cli-service build --target lib --name vue-plugins-demo --dest lib src/plugins/index.js"
}
- 打包
npm run lib
- 发布到npm
npm login // 登录npm,无账号需先注册
username: // 输入用户名
password: // 输入密码
email: // 输入邮箱
// 登录成功,发布即可
npm publish
- 项目中引用
npm i vue-plugins-demo
main.js中引入,注意必须引入css