首页 > 其他分享 >使用npm发布vue插件或组件库

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

时间:2023-03-20 15:37:18浏览次数:52  
标签:npm 插件 vue obj package app key 组件

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版本号,否则会报错

标签:npm,插件,vue,obj,package,app,key,组件
From: https://www.cnblogs.com/ss-jojo/p/17236436.html

相关文章

  • idea.2022.3.x社区版插件“intellij-spring-assistant”
    idea.2022.3.x社区版插件“intellij-spring-assistant”https://blog.csdn.net/ErickPang/article/details/128794674?spm=1001.2101.3001.6650.2&utm_medium=distribute.......
  • vue3 简单入门总结
    (vite+vue3)基础1.基础语法和传值问题//传值definePropsdefineEmits//父组件<template><div><Child:msg="userInfo.info"@change="change"/></Child><......
  • Hexo-Matery主题评论插件
    参考链接LuckLiuutterancHexo-Matery主题评论插件matery主题集成了各种评论模块,例如gitalk、gitment、disqus、livere、valine、waline、Twikoo、utteranc等,但我使......
  • vue、react 技术栈和生态
     vue技术栈和生态Vue是一个流行的JavaScript前端框架,它具有易学易用、高效灵活等特点。Vue技术栈包括以下内容:Vue:Vue框架本身,提供了组件化、响应式等核心特性......
  • Vue3 + Swiper开发轮播列表组件
    Vue3+Swiper开发轮播列表组件前端开发中,轮播列表的场景并不少见,通常使用Vue+Swiper来实现,上手比较快。安装依赖直接执行npm命令npmiswiper组件编写Html模板......
  • Vue2 开发必备的 VSCode 插件
    10个vue2必备开发插件Vetur:Vue.js开发插件,提供了语法高亮、错误提示、自动补全等功能。Vue2Snippets:Vue.js2代码段,可以快速生成常用的Vue.js代码。ESLint:JavaScript......
  • 开发一个浏览器插件的一些技巧
    此模式的浏览器<wiz_tmp_highlight_tagclass="cm-searching">插件,并不是<wiz_tmp_highlight_tagclass="cm-searching">chrome 以及firefox模式的<wiz_tmp_highlight_ta......
  • Django+VUE-1(数据库连接)
    1.创建apppythonmanage.pystartappxxx在settings.py的INSTALLED_APP注册2.创建pythonpackge(apps为例)右击MarkDirectoryas->SourcesRoot3.settings.pyimport......
  • vue2、等dom更新完之后再执行,获取dom元素 ref
    $nextTick作用:等Dom更新完以后再执行//等Dom更新完以后再执行this.$nextTick(()=>{varobj=newWxLogin({id:"weixin",......
  • vscode的Git History,GitLens — Git supercharged插件
    Gitsupercharged插件GitSupercharged插件是一个可以扩展和增强您的Git操作的VisualStudioCode插件。它提供了一系列实用工具,使得在VSCode中管理和使用Git变得更加高......