使用vue-cli怎么编写一个vue插件

本篇文章为大家展示了使用vue-cli怎么编写一个vue插件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

1、vue init webpack-simple 生成项目目录

2、调整目录结构

3、修改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:[] }

开发一个toast插件，可以借助npm平台发布，在这里就不做过多的说明了

toast.vue

<template>  <transition name="toast-fade">   <div class="toast"    :class="objClass"     v-show="isActive"    @mouseenter="onMouseenter"    @mouseleave="onMouseleave"    >    <button class="toast-close-button" @click="hide">×</button>    <div class="toast-container">     <div class="toast-title">{{title}}</div>     <div class="toast-content">{{content}}</div>    </div>   </div>  </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 之后就会在根目录下生成dist文件

接下来就可以使用了

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>  <div id="app">   <h2>vue-toast，{{msg}}</h2>   <div class="demo-box">    <button @click="test">默认效果</button>   </div>  </div>  <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>

总结：

1、使用Vue构造器，通过vue组件来创建一个子类：Vue.extend(component)

2、webpack配置output的path必须为绝对路径

3、webpack基础配置：entry,output,module,plugins

上述内容就是使用vue-cli怎么编写一个vue插件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。