网站首页 > 博客文章 正文
我查看了很多的教程都感觉不是很适合新手;今天我就来一步一步地教大家怎么把写好的插件发表到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
猜你喜欢
- 2025-03-28 如何在 TypeScript 中使用Enum(枚举)
- 2025-03-28 【开发环境】在macOS上安装Node.js:两种实用方法详解
- 2025-03-28 安装nodejs18 踩到的各种坑~~(nodejs安装失败)
- 2025-03-28 nodejs版本管理工具——nvm 安装与使用
- 2025-03-28 JavaScript全解析——npm(javascript解析json)
- 2025-03-28 一个基于 Spring Boot 的在线考试系统
- 2025-03-28 一文掌握 Nodejs 项目开发中 npm 的使用
- 2025-03-28 创建一个Vue3应用的详细步骤(怎么用vue创建一个新项目)
- 2025-03-28 NPM 常用命令详解(npm .staging)
- 2025-03-28 Vue开发必备:Node.js、NPM与VueCLI安装全攻略
你 发表评论:
欢迎- 374℃手把手教程「JavaWeb」优雅的SpringMvc+Mybatis整合之路
- 369℃用AI Agent治理微服务的复杂性问题|QCon
- 360℃初次使用IntelliJ IDEA新建Maven项目
- 353℃Maven技术方案最全手册(mavena)
- 351℃安利Touch Bar 专属应用,让闲置的Touch Bar活跃起来!
- 349℃InfoQ 2024 年趋势报告:架构篇(infoq+2024+年趋势报告:架构篇分析)
- 348℃IntelliJ IDEA 2018版本和2022版本创建 Maven 项目对比
- 344℃从头搭建 IntelliJ IDEA 环境(intellij idea建包)
- 最近发表
- 标签列表
-
- powershellfor (55)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)