手把手教你写vue插件并发表到npm上
我查看了很多的教程都感觉不是很适合新手;今天我就来一步一步地教大家怎么把写好的插件发表到npm上;也记录一下免得自己那天忘了;文笔不是很好;如果表述不是很好的地方请谅解;废话不多说;现在开始
第一步;
创建这样结构的一个文件夹;
lib文件:中存放你想要写的逻辑
index.js 主要是引入文件并暴露出去
package.js主要是进行何种配置
README.json 文件主要是用来说明
第二步:
配置 index.js 文件
import vueTouch from './lib/scrolls.vue' // 这个就是你平时写的 SFC 组件
// 这里要导出一个包含 install 方法的对象
const plugin = { // 这里要导出一个 install 方法
install (Vue, options) {
// 这里写你的代码,你可以全局注册组件,也可以写全局指令,也可以扩展 Vue 的方法
// 1. 全局组件
Vue.component(vueTouch.name, vueTouch)
// 2. 全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 3. 全局指令
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
})
// 4. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
})
// 5. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
}
export default plugin
第三步:
配置package.json文件
{
"name": "vue-zh-time", // npm包名
"version": "1.0.1", // 版本
"description": "vue plugins",
"main": "index.js",
"directories": {
"lib": "lib" // 源码文件
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "z", // 作者
"license": "ISC"
}
第四步:发布
首先登陆;这儿主要输入你npm的账户和密码还有邮箱
npm login // 登陆
登陆成功以后就可以发布了
npm publish // 发布
我自己写了一个公告栏滚动和定时器;都发布成功并且可以下载使用都没有问题;大家都可以去试试吧
滚动事件
npm i vue-zh-scroll
定时器
npm i vue-zh-time