自定义vue组件并进行npm包上传

一、创建组件

根目录下创建packages文件夹，需要发布的组件放置在此目录下
在这里插入图片描述
接下来进行代码事例
MyButton/myButton.vue自写逻辑

<template>
    <div>
        <h1>我是要上传到npm的组件</h1>
        <button>hello world</button>
    </div>
</template>
<script>
export default {
    name:"MyButton",
    setup() {
        
    },
}
</script>

MuButton/index.js

//导入组件,组件必须声明name
import MyButton from './myButton.vue';

//为组件提供install安装方法，供按需引入
MyButton.install = function(Vue){
    
    
    Vue.component(MyButton.name,MyButton)
}

//默认导出组件
export default MyButton

index.js

import MyButton from './MyButton/index.js';

//存储组件列表
const components = [
    MyButton
];

//install是让业务代码在main.js 引入之后 use(myUi)  注册到全局用的
const install = (app, opts = {
     
     }) => {
    
    
    components.forEach(item => {
    
    
        app.component(item.name, item)
    })
}

const exportObject = {
    
    
    // 全局导出
    version: '1.0.0',
    install,
    // 单独导出button组件用于按需加载
    MyButton
};

export default exportObject;

二、添加lib打包入口

在package.json文件的script添加如下配置

"build-lib": "vue-cli-service build  --target lib --entry src/packages/index.js --name tsLib --dest lib"

–target属性表示构建目标，默认为应用模式，这里需要设置为lib，表示启用库模式。
–name属性表示构建的名称，可以与package.json文件中的name字段的值不相同；
–entry表示入口文件，在这里我的入口文件放置在src/packages/index.js
–dest表示打包后的文件所在文件夹名称，默认为dist

三、打包组件库

输入npm run build-lib命令，会生成lib文件夹
在这里插入图片描述

将打包好的****.umd.min.js直接放到业务项目中，直接引入也是可以用的。

四、切换到lib目录并初始化发布到npm

切换到lib目录

npm init

填写包名，版本（首次发布一般写1.0.0），项目入口（不填则为main.js），git仓库（没有放）,keywords(可以填自己项目主要功能)，包括许可证也默认，作者自填
（不想写的可以直接加上-y 一切默认，后期也可以在package.json中修改的，问题不大）
在这里插入图片描述
最后会生成json

package.json中的main字段指向的是Library的入口，通常有3个选择：
1.指向源代码入口文件，如src/index.js;
2.指向打包后的开发版本，如dist/library.js;
3.指向打包后的发布版本，如dist/library.min.js。
引用Library的方式也分为两种：
1.通过script标签直接引用，适用于简单页面；
2.通过require或import方式引用，需要借助打包工具打包，适用于复杂页面。

什么是lib库

LIB是静态链接库
lib应该说是一个程序集, 只是把一些相应的函数总结在一起, 如果调用lib中的函数,在工程编译时,这些调用的函数都将参加编译.
从内存管理的角度来看，lib必须被链接到主程序中，主程序进入内存，lib也同时进入内存
举个例子：an-design不是lib库，它只是一个基于vue或者react的一个组件ui组件库，vue和react是框架，而jquery就算是一个lib库，它集成了多种函数，可以用于用于基于js的各种平台上（只要你不闲它又慢又大~）。
1.官网注册
https://www.npmjs.com/signup
2.命令行注册或登录
npm adduser //按照提示输入用户名,邮箱等即可
（可能会不成功，切换网络试试）
3.npm publish

这里我有话要说，着实被坑的有点难受。
npm账号早已注册了，在发布包的时候提示
在这里插入图片描述
然后我找了各种方法，最多的一种说法是：邮箱没有激活
（然而我不是）

在这里总结一下可能原因：

邮箱认证问题，在注册npm账号之后，会在邮箱里面收到验证，验证即可。（其实我并没有收到验证，而且还翻了收件箱好几遍，一次性的验证码倒是收到无数）
包重名问题，去检查一下自己发布的包是不是冲突了

更新npm包

更新版本号

npm version patch

更新包内容

npm publish

在项目中导入包

main.js中全局注册组件
在这里插入图片描述
app.vue中引入组件