网站首页 > 教程文章 正文
我查看了很多的教程都感觉不是很适合新手;今天我就来一步一步地教大家怎么把写好的插件发表到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
猜你喜欢
- 2024-12-29 vue前端埋点 - 神策埋点 vue前端埋点怎么实现
- 2024-12-29 面试遇到 性能优化 必答的 9 个点,加分!
- 2024-12-29 Vue NextTick揭秘:你不知道的秘密!
- 2024-12-29 史上最全 vue-router 讲解 !!! vue-router怎么用
- 2024-12-29 前端项目重构的一些思考和复盘 前端项目构建工具有什么
- 2024-12-29 vue3.0系列:Vue3自定义PC端弹窗组件V3Layer
- 2024-12-29 VueUse中的这5个函数,也太好用了吧
- 2024-12-29 vue-cms开源企业级后台管理系统 开源vue项目
- 2024-12-29 Vue和React的一些对比:哪个更适合你?
- 2024-12-29 第14天|14天搞定Vue3.0,电子地图,一定要用Vue?
- 最近发表
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- md5 sha1 (32)
- mybatis plus page (35)
- semaphore 使用详解 (32)
- update from 语句 (32)
- vue @scroll (38)
- 堆栈区别 (33)
- 在线子域名爆破 (32)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)