使用npm发布vue插件或组件库

1.先行再npm官网注册一个自己的npm账号;https://www.npmjs.com/
2.准备插件或组件库:
1)新建一个文件夹package作为写组件的地方
2)package文件夹内使用npm init命令初始化包,获得一个package.json文件,package.json包含作者,npm包名称,说明,作者及入口等属性
main属性是入口文件
3)同级文件夹下准备入口文件index.js,内容如下

    import workForm from './views/workIndex.vue'
     export default {
       install: (app) => {
        //空判断
        app.config.globalProperties.$isNotEmpty = function (obj) {
            return (obj !== undefined && obj !== null && obj !== '' && obj !== 'null')
        }
        //获取默认值
        app.config.globalProperties.$getDefalut = function (obj, key, df) {
            return (obj === undefined || key === undefined || !this.$isNotEmpty(obj[key])) ? df : obj[key];
        }
        //深度克隆
        app.config.globalProperties.$deepCopy = function (obj) { return JSON.parse(JSON.stringify(obj)) }

        //全局挂载组件
        app.component('workForm',workForm)
     }
    }
4)新建README.md说明文件

3.在package文件夹根目录npm login,此时会让你提供注册npm账号时的账号密码邮箱,按照提示输入即可
1)如果npm login报错,可检查下是否使用了淘宝镜像,使用淘宝镜像是无法登录的,
2)切换回npm后,可使用npm who am i来查看当前登录账号
4.登录成功后执行npm publish进行推送,成功后即可使用npm install ‘包名’ 进行下载
1)包名是package中你定义的name属性
2)每次调整修改后,npm publish上传之前一定要修改version版本号,否则会报错

posted @   VL小小白  阅读(97)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示