Write a plugin for Vue _vue2.0

1 Introduction

To write Vue log plug-ins as an example, from the development of plug-ins to deployment.

Original https://lluvio.github.io/blog/plugin-for-vuejs.html
2 Code Initial

Without one-step development of Plug-ins, first put aside the Vue to ensure that their code can run

var logger = {
  debug:false,
  prefix: ' Yunhuni: '
} let

levels = [' Log ', ' info ', ' warn ']
of levels) {
 Logger[level] = function () {
  if (!this.debug) return;
  if (typeof console = = "undefined") return;
  var slice = Array.prototype.slice;
  var args = slice.call (arguments, 0);
  Args.unshift (This.prefix + level);
  Console[level].apply (console, args);
 }

Logger.log (' aaaa ') logger.info (' aaaa ')
logger.warn (' aaaa ')

3 Write into a Vue plug-in

The code above can run, and then access our code based on the document.

Const vlogger = {}
vlogger.install = function (Vue, options) {
  if (vlogger.installed) return
  var logger = {
  dev:true,
    prefix: ",
    levels: [' log ', ' warn ', ' Debug ']
  }
  if (options) {for
    (const key of OBJECT.K Eys (Options)) {
      if (key = = = ' Levels ') {
        Logger[key] = Logger[key].concat (Options[key])
      } else {
        Logger[key] = Options[key]
      }
    }
  (const level of
  logger.levels) {
    Logger[level] = function () {
      if (!this.dev | | typeof console = = ' undefined ') return
      var args = array.from (arguments)
      Args.unshift (' [${this.prefix}:: ${level}] '. toUpperCase ())
      Console[level].apply (console, args)
    }
  }
  vue.prototype. $log = Logger
  Vue.log = Logger
}
Export Default vlogger

4 Use

Import Vuelogger from './logger '
vue.use (Vuelogger, {prefix:new Date (), dev:true})

//@test. Vue this
. $log . log (' Hello Vue log ')//=> [MON DEC 2016 15:35:00 gmt+0800 (CST):: Log] Hello World

4.1 Parameter name type default prefix string None Dev Boolean true levels array [' Log ', ' warn ', ' default '] 5 write test case

Using Jasmine, here is an example of the test parameter options

Test parameter Level
import Vue from ' Vue '
import Logger from '. /.. /src/index.js '

describe ("this. $log", function () {

  vue.use (Logger)
  const VM = new Vue ()
  const STR = ' Hello World's

  it ("Level Log out Hello World", function () {
    expect (VM. $log. Log). tobedefined ()
    vm. $log. log = Jasmine.createspy (' log ')
    vm. $log. log (str)
    expect (VM. $log. Log). Tohavebeencalledwith (str);

  It ("Level debug out Hello World", function () {
    expect (VM. $log. Debug). tobedefined ()
    vm. $log. Debug = Jasmine.createspy (' Debug ')
    vm. $log. Debug (str)
    expect (VM. $log. Debug). Tohavebeencalledwith (str);

  Describe ("Vue log", function () {
    It ("Level debug out Hello World", function () {
      expect (VM. $log. Debug). tobedefined ()
      Vue.log.debug = Jasmine.createspy (' Debug ')
      Vue.log.debug (str)
      expect (Vue.log.debug) . Tohavebeencalledwith (str);});});

6 Deployment 6.1 How to choose an open source license

Reference to Ruan's Article 6.2 Add Project Badge

These micro-chapters are simple and straightforward to understand the state of the project. You can get the SVG on this site you want, the general format is as follows

! [Ci] (https://img.shields.io/circleci/project/github/Lluvio/vue-logger.svg)

Want to click on the icon to jump

[! [Ci] (Https://img.shields.io/circleci/project/github/Lluvio/vue-logger.svg)] (Https://circleci.com/gh/Lluvio/vue-logger)

7 release

First you need to add NPM users locally

# account password and your account in the NPM official website is consistent with
NPM adduser

# and log in to
NPM login

If you want to specify a specific label, refer here 7.1 publish failed

The following error occurred, possibly a proxy address error, and each command needs to be brought up with--registry http://registry.npmjs.org

No_perms Private mode enable, only admin can publish this module

8 Last

The end result is here, please correct me!