Home >Web Front-end >JS Tutorial >How to write vue plug-in using vue-cli
This article mainly introduces the method of writing vue plug-ins using vue-cli. Now I will share it with you and give you a reference.
Use vue components to create templates, use webpack to package and generate plug-ins, and then use them globally
1. vue init webpack-simple generates the project directory
2. Adjust the directory structure
3. Modify webpack.config.js
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'vue-toast.js', // 打包后的格式(三种规范amd,cmd,common.js)通过umd规范可以适应各种规范,以及全局window属性 libraryTarget:'umd', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, ] }, plugins:[] }
Develop a toast plug-in, which can be released with the help of npm platform. I won’t explain too much here
toast.vue
<template> <transition name="toast-fade"> <p class="toast" :class="objClass" v-show="isActive" @mouseenter="onMouseenter" @mouseleave="onMouseleave" > <button class="toast-close-button" @click="hide">×</button> <p class="toast-container"> <p class="toast-title">{{title}}</p> <p class="toast-content">{{content}}</p> </p> </p> </transition> </template> <script> export default { data: () => ({ list: [], title: null, content: null, type: null, isActive: false, timer: null, onShow: () => {}, onHide: () => {} }), computed: { objClass () { // 样式'success, error, warning, default' return this.type ? 'toast-' + this.type : null } }, methods: { // 显示 show (params) { let {content, title, onShow, onHide, type} = params this.type = type this.content = content this.title = title this.onShow = onShow this.onHide = onHide this.isActive = true this.setTimer() }, // 隐藏 hide () { this.isActive = false }, // 计时器 setTimer () { clearTimeout(this.timer) this.timer = setTimeout(() => { this.isActive = false }, 4000) }, // 鼠标移至组件时保持显示状态 onMouseenter () { clearTimeout(this.timer) }, // 鼠标移开组件时重新定时 onMouseleave () { if (this.isActive) this.setTimer() } }, watch: { isActive (val) { if (val && typeof this.onShow === 'function') { this.onShow() } else if (!val && typeof this.onHide === 'function') { this.onHide() } } } } </script> <style> .toast { position: fixed; top: 10px; right: 10px ; display: block; width: 300px; overflow: hidden; box-shadow: 0 0 6px #999; opacity: .8; border-radius: 3px 3px; padding: 15px 15px 15px 15px; background-position: 15px center; background-repeat: no-repeat; color: #333; background-color: #f0f3f4; } .toast-success { color: #fff; background-color: #51a351; padding: 15px 15px 15px 50px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; } .toast-error { color: #fff; background-color: #bd362f; padding: 15px 15px 15px 50px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; } .toast-warning { color: #fff; background-color: #f89406; padding: 15px 15px 15px 50px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; } .toast:hover { opacity: 1; box-shadow: 0 0 18px #888; transition: all 200ms ease; } .toast-container { vertical-align: middle; } .toast-fade-enter, .toast-fade-leave-active { opacity: 0; transform: translateX(100%); } .toast-fade-leave-active, .toast-fade-enter-active { transition: all 400ms cubic-bezier(.36,.66,.04,1); } .toast-title { font-size: 14px; font-weight: bold; } .toast-close-button { padding: 2px 2px; border: none; background: transparent; position: relative; right: -10px; top: -15px; float: right; font-size: 20px; font-weight: bold; color: #ffffff; -webkit-text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); } </style>
index.js
import ToastComponent from './toast.vue' let Toast = {}; Toast.install = function(Vue, options = {}) { // extend组件构造器 const VueToast = Vue.extend(ToastComponent) let toast = null function $toast(params) { return new Promise( resolve => { if(!toast) { toast = new VueToast() toast.$mount() document.querySelector(options.container || 'body').appendChild(toast.$el) } toast.show(params) resolve() }) } Vue.prototype.$toast = $toast } if(window.Vue){ Vue.use(Toast) } export default Toast
npm run build will generate a dist file in the root directory
You can use it next
demo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <!--引入--> <script src="node_modules/vue/dist/vue.js"></script> <script src="dist/vue-toast.js"></script> </head> <body> <p id="app"> <h1>vue-toast,{{msg}}</h1> <p class="demo-box"> <button @click="test">默认效果</button> </p> </p> <script> var vm = new Vue({ el: "#app", data: { msg: '你好' }, methods: { test() { this.$toast({ title:'消息提示', content: '您有一条新消息', type: 'warning', onShow: ()=>{ console.log('on toast show') }, onHide: ()=>{ console.log('on toast hide') } }) } } }) </script> </body> </html>
Summary:
1. Use the Vue constructor to create it through the vue component A subclass: Vue.extend(component)
2. The path of webpack configuration output must be an absolute path
3. Webpack basic configuration: entry, output, module, plugins
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
vue Example of simple auto-complete input box
Vue routing lazy loading implementation method
How to package js with webpack
The above is the detailed content of How to write vue plug-in using vue-cli. For more information, please follow other related articles on the PHP Chinese website!