1 介绍
以编写Vue日志插件为例,讲述从插件的开发到部署。
原文
2 代码初始
不用一步到位开发插件,先抛开 Vue保证自己的代码能够运行
var logger = {
debug: false,
prefix: 'Yunhuni:'
}
let levels = ['log', 'info', 'warn']
for (let level 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 编写成Vue的插件
上面代码能跑了,然后再根据 文档 接入我们的代码
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.keys(options)) {
if (key === 'levels') {
logger[key] = logger[key].concat(options[key])
} else {
logger[key] = options[key]
}
}
}
for (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 使用
import vueLogger from './logger'
Vue.use(vueLogger, { prefix: new Date(), dev: true })
// @test.vue
this.$log.log('hello vue log') // => [MON DEC 05 2016 15:35:00 GMT+0800 (CST) :: LOG] hello world
4.1 参数
name | type | default |
---|---|---|
prefix | string | none |
dev | boolean | true |
levels | array | ['log', 'warn', 'default'] |
5 编写测试用例
使用jasmine,这里以测试参数 options 为例子
// 测试 参数 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'
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 部署
6.1 如何选择开源许可证
参考阮老师的 文章
6.2 添加项目徽章
通过这些微章简单直白的了解该项目的状态。 可以在这个 网站 获取你想要svg,一般格式如下
![Ci](https://img.shields.io/circleci/project/github/Lluvio/vue-logger.svg)
想要图标点击可跳转
[![Ci](https://img.shields.io/circleci/project/github/Lluvio/vue-logger.svg)](https://circleci.com/gh/Lluvio/vue-logger)
7 发布
7.1 publish 失败
出现以下错误,有可能是代理地址错误,每个命令后都需要带上 --registry http://registry.npmjs.org
no_perms Private mode enable, only admin can publish this module
8 最后
最终结果在 这里 , 欢迎指正!