前言
在工作中，会存在多个项目共用一个组件的问题，直接复制组件到其它项目的话，后续维护起来就不方便，我们可以将组件上传到npm上去复用我们的组件，后续维护这一个组件就行了，下面是个人做的小总结，希望能对各位能起到一丝的帮助~
项目组件
组件基于
vue-cli手脚架搭建在需要打包的组件中加入name方便全局注册组件
<script>
export default {
name: "test",
}
</script>
在根目录添加
index.js文件（可根据自己的情况命名文件名）
import Test from './components/test'
const components = [Test]
//注册全局组件
const install = function (Vue) {
components.forEach((component) => {
Vue.component(component.name, component)
})
}
export default {
install,
Test
}
配置打包命令
在
package.json中配置要发布组件的打包命令
"name": "test-test", //包名称
"version": "0.0.1", //版本号
"private": false, //是否私有话，为true就发布不了
"description": "测试组件", //检索信息
"main": "dist/test-test.umd.min.js",//包入口文件
"scripts": {
"lib": "vue-cli-service build --target lib --name test-test -dest lib packages/index.js",
}
注：test-test为自己的包名称（根据自己项目组件去命名，查看包名是否占用）
packages/index.js是刚刚上面命名的组件注册入口文件路径
npm注册账号
官网地址：www.npmjs.com/
注：记住自己注册的账号密码邮箱，后面
npm login要用
配置npm镜像
不配置的话
npm login可能会401
npm config set registry https://registry.npmjs.org/
查看是否配置成功
npm config get registry
登陆npm
输入网站注册的账号密码和邮箱，输入邮箱后邮箱会收到验证码，输入邮箱验证码即可
npm login
登陆成功后可以切换回自己的镜像啦~(下包网速快的话可忽略)
npm config set registry https://registry.npm.taobao.org
发布npm
注：直接在项目中执行该命令即可，不用进入打包文件执行哦~
npm publish
注：发布前在网址输入
registry.npmjs.org/自己的包名称（要英文的包名称哦！别被带偏写成中文了~）
看看是否被占用（如果被占用
npm publish时会报403的）
发布成功后就能跟普通的包一样引入到自己的项目里使用啦~
结语
如果项目打包到npm下载下来图片无法显示可以看这篇文章哦~
如果你觉得此文对你有一丁点帮助，麻烦点个赞哈，谢谢大家。