手把手教你写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
相关文章
- Shell中针对字符串的切片,截取,替换,删除,大小写操作
- Python学不会来打我(8)字符串string类型深度解析
- TS类型体操,看懂你就能玩转TS了_ts l
- 你只会用 split?试试 StringTokenizer,性能可以快 4 倍
- 2025-08-22:最短匹配子字符串。用go语言,给定两个字符串 s 和 p,
- case when语句增加_case when加条件
- 一次完整的HTTP请求与响应涉及了哪些知识?
- Excel超链接点击无反应及安全提示问题
- Java 判断对象是否所有属性为空,大家觉得这样写可以吗?
- Spring事物(@transactional注解)在什么情况下会失效,为什么?