为 Vue 编写一个插件
来源:互联网 发布:java se 5.0下载 编辑:程序博客网 时间:2024/06/06 00:26
1 介绍
以编写Vue日志插件为例,讲述从插件的开发到部署。
原文 https://lluvio.github.io/blog/plugin-for-vuejs.html
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.vuethis.$log.log(‘hello vue log’) // => [MON DEC 05 2016 15:35:00 GMT+0800 (CST) :: LOG] hello world
4.1 参数
5 编写测试用例
使用jasmine,这里以测试参数 options 为例子
// 测试 参数 levelimport 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 发布
首先需要在本地添加 npm 用户
# 账号密码和你在 npm 官网注册的账号一致npm adduser# 然后登入npm login
如果想要指定特定标签,参考 这里
7.1 publish 失败
出现以下错误,有可能是代理地址错误,每个命令后都需要带上 --registry http://registry.npmjs.org
no_perms Private mode enable, only admin can publish this module
8 最后
最终结果在 这里 , 欢迎指正!
阅读全文
0 0
- 为 Vue 编写一个插件
- 为 Vue 编写一个插件
- 使用webpack打包编写一个vue插件
- vue plugin 插件编写以loading为例
- 编写一个webpack插件
- vue---使用vue编写插件,基于vue2.x编写常用toast loading插件,一键复用组件
- 如何为thunderbird编写插件
- Unity为Android编写插件
- 如何编写一个Jquery插件
- 如何编写一个gulp插件
- 如何编写一个gulp插件
- 如何编写一个gulp插件
- 如何编写一个gulp插件
- 为Nagios编写自己的插件
- 为QT的Webkit 编写插件
- 为QT的Webkit 编写插件
- 为CocosCreator编写第一个插件
- vue插件
- git 配置多个SSH-Key
- iOS app 瘦身
- SpringMVC新手入门
- NDK编程:JNI与Java,C++字符类型转换
- 03.数据库连接池
- 为 Vue 编写一个插件
- 序列化与反序列化
- JavaScript:Object.prototype.toString方法的原理
- 银行家算法,死锁检测算法实践
- memcache
- java- IO
- Java二叉树,递归与非递归遍历算法
- PWM占空比和电机转速有什么线性关系
- java 中使用自定义标签模仿jstl的 ForEach()