Vue plug-ins from package to release

Classification of plug-ins

• Add global methods or attributes such as vue-element
• Add global resources such as the v-bind directive
• Some mixing added through the mixin method
• Add Vue instance method Vue. Prototype above

Use of plug-ins

Use the plug-in with the global method vue.use (). It needs to be done before you call new Vue() to start the application:

/ / call ` MyPlugin. Install ` (Vue)
Vue.use(MyPlugin)

new Vue({
  / /... options
})` `'can also be passed an option object:'` ` javascript
Vue.use(MyPlugin, { someOption: true })
Copy the code

Plug-in development

The vue.js plug-in has a public method called Install. The first argument to this method is the Vue constructor, and the second argument is an optional option object:

MyPlugin.install = function (Vue, options) {
  // 1. Add a global method or attribute
  Vue.myGlobalMethod = function () {
    / / logic...
  }

  // 2. Add global resources
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      / / logic...}... })// 3. Inject components
  Vue.mixin({
    created: function () {
      / / logic...}... })// 4. Add instance methods
  Vue.prototype.$myMethod = function (methodOptions) {
    / / logic...
  }

  //5. Register components directly
  Vue.use();
}
Copy the code

In any case, the goal is to use install’s Vue parameters in your project

Component encapsulation from scratch

Needed: Enoji plug-in that encapsulates a twitter emoji

To prepare

Node environment VUE environment VUE-CLI scaffolding and so on

Create a project

Using Vue Init to create simple scaffolding, simple modifications can be suitable for plug-in development

vue init webpack-simple weibo-emoji

cd weibo-emoji

npm install

The development directory is as follows:

A plugin

Our normal Webpack entry will be set to main.js to do some dependency import and view mount operations. When we write plug-ins, of course, we will not mount this step operation. Here we can use index.js as our entry file and expose a plugin object with the install method as follows:

import weiboEmoji from './compontent/weibo_emoji'
constemoji = { install(Vue, options) { Vue.component(weiboEmoji.name, weiboEmoji); }}if (typeof window! = ='undefined' && window.Vue) {
    window.Vue.use(emoji);
}
export default emoji 
Copy the code

release

1. Check the WebConfig configuration before publishing:

    entry: './src/index.js'./ / the entry
    output: {
        path: path.resolve(__dirname, './dist'),// Package the output directory
        publicPath: '/dist/'.// Static resource prefix
        filename: 'vue-weibo-emoji.js'.// The name of the package builder
        library: 'WeiboEmoji'.// The name of the module when umD is packaged
        libraryTarget: 'umd'.// Package mode AMD
        umdNamedDefine: true // Use the default name when packaging is undefined
    },
Copy the code

2. Check the publishing configuration:

    "name": "weibo-emoji".// The name of the packaged project, which is the folder name in Modemodules and follows import from
    "main": "dist/vue-weibo-emoji.js".// Are access to nodemodules dependencies, where the actual imported files act as portals
    "repository": {// The contents of the warehouse do not affect the content of the post
        "type": "git"."url": "https://github.com/icebluesky2666/weibo-emoji"
    },
    "description": "A Weibo emoji plugn"./ / description
    "version": "1.0.2"./ / version
    "author": "jhqin"./ / the author
    "license": "MIT"./ / license type
Copy the code

For multiple releases, the version number must be different each time

3. Finally:

  npm build
  npm login
  npm publish
Copy the code

use

npm install weibo-emoji
import WeiboEmoji from 'weibo-emoji'
Vue.use(WeiboEmoji)
Copy the code

<weibo-emoji class="emoji" :weiboIcon="weiboIcon" @changeEmoji="selsctEmoji = arguments[0].phrase" ref="emoji"> </weibo-emoji>
Copy the code

Effect:

The source code

Weibo-Emoji

Due to experience, if there are mistakes, welcome to correct!