Comment écrire le plug-in Vue en utilisant vue-cli

Cet article présente principalement la méthode d'écriture du plug-in vue à l'aide de vue-cli. Maintenant, je le partage avec vous et le donne comme référence.

Utilisez les composants vue pour créer des modèles, utilisez webpack pour empaqueter et générer des plug-ins, puis utilisez-les globalement

1 vue init webpack-simple génère le répertoire du projet

. 2. Ajustez la structure des répertoires

3. Modifiez 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:[]
}

Développez un plug-in toast, qui peut être publié en utilisant la plateforme npm. Je n'entrerai pas dans trop d'explications ici

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 () {
   // 样式&#39;success, error, warning, default&#39;
   return this.type ? &#39;toast-&#39; + 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 === &#39;function&#39;) {
    this.onShow()
   } else if (!val && typeof this.onHide === &#39;function&#39;) {
    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 générera. le fichier dist dans le répertoire racine

Vous pouvez l'utiliser ensuite

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: &#39;你好&#39;
   },
   methods: {
    test() {
      this.$toast({
       title:&#39;消息提示&#39;,
       content: &#39;您有一条新消息&#39;,
       type: &#39;warning&#39;,
       onShow: ()=>{
         console.log(&#39;on toast show&#39;)
       },
       onHide: ()=>{
         console.log(&#39;on toast hide&#39;)
       }
     })
    }
   }
  })

 </script>
</body>
</html>

Résumé :

1. Utilisez Vue Constructor, créez une sous-classe via le composant vue : Vue.extend(component)

2 Le chemin de la sortie de configuration du webpack doit être un chemin absolu

3. Configuration de base du Webpack : entrée, sortie, module, plugins

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Exemple de zone de saisie de saisie semi-automatique simple dans vue

Méthode d'implémentation du chargement paresseux du routage Vue

Comment empaqueter js avec webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!