如何将自己封装的组件上传到npm并使用

本文链接：https://blog.csdn.net/alice9999999/article/details/126256242

1 首先我们编辑入口文件 src/components/index.js, 使其被作为 UI 库导入时能自动在Vue中注册我们的 Component。

import MetaCard from "./meta/meta-card.vue"; 
import MetaHeader from "./meta/meta-header.vue";
import svgIcon from "./svgIcon/index.vue";  
// console.log(MetaCard); 
const Components = {
    MetaCard,
    MetaHeader,
    svgIcon
}; // 将来如果有其它组件,都可以写到这个数组里
// 批量组件注册
function install(app) {
    Object.keys(Components).forEach( v => {
        app.component(v, Components[v])
    })
}
// console.log(Components)
export default install

二在package.json中设置配置基本信息

"name": "abrain-web-components",
"version": "0.1.0",
"author": "alice",
"description": "PC端组件库",
"private": false,

三配置打包相关信息

通过files属性, 来配置我们想要发布到 npm 上的文件路径：

"files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
],

通过main属性来选择发布我的的*.common.js文件:

"main": "./dist/abrain-web-components.common.js",

添加build打包配置：

"build-bundle": "vue-cli-service build --target lib --name abrain-web-components ./src/components/index.js"

最终package.json中相关内容如下图：

四打包及发布npm:

1 通过"npm run build-bundle"进行打包

2 通过"npm publish --access public"发布npm上

有的时候会发布失败，报如下错误：

是因为长时间没有操作npm登录失效了，重新登录下即可

呀比，重新登陆后，发布成功了：