Use webpack to package and compile a vue-toast plug-in, webpackvue-toast

Use webpack to package and compile a vue-toast plug-in, webpackvue-toast

This article describes how to use webpack to package and compile a vue plug-in. The details are as follows:

I. Description:

Requirement: Create a toast plug-in

Idea: Use the vue component to create a template and use webpack to generate a plug-in for global use.

# Project directory: | _ package. json | _ webpack. config. js | _. babelrc | _ dist | _ src | _ index.html | _ lib | _ index. js | _ vue-toast.vue

1.1 webpack Basics

1. Basic plug-ins

-Html-webpack-plugin: multiple pages are generated based on the same template.
-Extract-text-webpack-plugin
-UglifyJSPlugin: js compression plug-in
-CommonsChunkPlugin: Extracts public files from multiple pages.
-Clean-webpack-plugin: clears previous files before packaging.
-Copy-webpack-plugin:

2. Common loader parser

-Css-loader (parsing css files)
-Sass-loader/less-loader/node-sass (pre-compiled parsing)
-File-loader/url-loader: parse images (png, jpg/svg/gif)
-Add a prefix to css: postcss-loader and autoprefixer

3. webpack. config. js configuration file

// Webpack3.0 does not support relative paths. Therefore, in the node project, you can use the path module to convert relative paths to absolute paths var path = require ('path '); // core configuration module. exports = {// entry file entry :'. /src/lib/index. js', // export configuration output: {path: path. join (_ dirname ,'. /dist '), // input path filename: 'vue-toast-demo.js', // package file name // package format (three specifications amd, cmd, common. js) The umd specification can be used to adapt to various specifications, as well as the global window attribute libraryTarget: 'umd', library: 'vuetoastdemo'}, module: {rules: [// module loader {test:/\ required for parsing the module :/\. vue $/, loader: 'vue-loader '}, {test :/\. js $/, exclude:/node_modules/, loader: "babel-loader"}]}, plugins: []}

2. Develop a vue-toast plug-in

1. Use the npm platform to publish a vue plug-in
2. Process: declare plug-ins -- write plug-ins -- register plug-ins -- use plug-ins

There are four ways to write plug-ins as described in the official document:

#1. add a global method or attribute Vue. myGlobalMethod = function (){...} #2. add global resource Vue. directive ('My-ctive Ve', {bind (el, binding, vnode, oldVnode ){...}}) #3. inject component Vue. mixin ({created: function () {}}) #4. add an instance Vue. prototype. $ myMethod = function (options ){}

Follow these steps to develop the vue plug-in:

1. The Vue. js plug-in should have a public Method install.

2. The first parameter of the install method is the Vue constructor, and the second parameter is an optional option object.

myplugin.install = function(Vue,options){...}

Official Note: https://cn.vuejs.org/v2/guide/plugins.html#

Import ToastComonent from '. /vue-toast.vue '// introduce the vue template component let Toast = {} Toast. install = function () {// register the plug-in Vue through install. prototype. $ toast = function () {Vue. extend (ToastComponent) }}if (window. vue) {// If you directly use the script tag to introduce the plug-in, you can use this method to register the plug-in to vue Vue. use (Toast)} export default Toast; // export toast

Practice

Requirement: A toast bullet layer function

1. template. vue. Provides html templates

<Template> <section class = "toast-container": class = "visible? 'Fade-in ': 'fade-out' "> <div class =" toast "> <span >{{ message }}</span> </div> </section> </template> <script> export default {name: 'tmp ', data () {return {visible: true, message: 'default prompt' }}</script> <style> </style>

2. index. js

import ToastComponent from './vue-toast.vue'let Toast = {}Toast.install = function(Vue,options){ var opt={  duration:3000, } for(var key in options){  opt[key] = options[key]; } Vue.prototype.$toast=function(msg,option){  if(typeof option =='object'){   for(var key in option){    opt[key]=option[key]   }  }  const ToastController= Vue.extend(ToastComponent);  var instance = new ToastController().$mount(document.createElement('div'))  instance.message = msg;  instance.visible = true;  document.body.appendChild(instance.$el)  setTimeout(()=>{   instance.visible=false;   document.body.removeChild(instance.$el)  },opt.duration) } Vue.prototype.$toast['show']=function(msg,option){  Vue.prototype.$toast(msg,option); }}if(window.Vue){ Vue.use(Toast)}export default Toast;

Demo.html

<! DOCTYPE html> 
Summary

 
 
 
  
Use the basic Vue constructor and use the vue component to create a subclass: Vue. extend (component)
 
 
  
Four methods for compiling vue plug-ins: Common-Vue. prototype. $ method, others: Vue. method, Vue. mixin (option), Vue. direve ve ('method', option)
 
 
  
The path for configuring output in webpack must be an absolute path.
 
 
  
Three attributes of webpack configuration: entry, output, module, and plugins

 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.