1.环境准备，需要装好node，注册号npm账号,这里不做详解

2.创建编写组件和方法的文件夹package

3.在文件夹中创建需要定义的组件，并且加上name属性

//组件<template><div><button>按钮组件</button></div></template><script>export default {name: 'ComButton'}</script>//====================================分割线============================================//方法utilsconstfunc1=()=>{ return 'test1';}const func2=()=>{return 'test2';}export default{func1,func2}

4.然后在package文件中新建index.js引入写好的组件和方法

//提一下批量引入的方法，如果是vuecli则使用require.context(),vite使用import mate golb()import ComBotton from './com-button/index'import publicFunc from './public-func/index' const coms=[ComBotton] const install = function (Vue) {coms.forEach((com) => {Vue.component(com.name, com);});};export default { install, publicFunc }

5.引入完成之后一定要先本地测试一下是否可用，如果可用再进行上传

//在main.js中引入import com from './package/index'Vue.prototype.$public=com.publicFuncVue.use(com)//在vue模块使用<template><div id="app"><ComButton></ComButton></div></template><script>export default {mounted() {console.log(this.$public.func1());}}</script>

6.验证可用之后，开始配置package.json进行自动化打包

//如果是vuecli2"package": "vue-cli-service build --target lib ./src/package/index.js --name zqcom --dest zqcom"//如果采用vuecli3 提供了新方法"lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"

7.执行npm run package进行打包

8.打包完成之后会生成一个zqcom文件，这就是需要上传的npm包了，然后在“包的文件里执行npm init -y”进行包配置，这里主要配置包名称，和版本号

9.下面就是进行发包了，因为本地可能安装了淘宝镜像，所以先把镜像切换回来

npm config set registry=https://registry.npmjs.org

10.登陆npm账号

npm adduser//后面按步骤操作即可登陆成功之后npm publish //推送包到npm成功之后登陆npm搜索查看如下图，这一步出问题看下面的补充说明

11.下面就可以在项目中正常使用了

//在main.js中引入组件和方法importzqcomfrom 'zqcom'Vue.prototype.$Public=zqcom.publicFuncVue.use(zqcom)//正常使用<template><div id="app"><ComButton></ComButton></div></template><script>export default {mounted() {console.log(this.$Public.func1());}}</script>

12.补充说明

如果出现报错情况 Remove the 'private' field from the package.json to publish it. 查看打包之前的文件的package.json中的private是否设置成了false,一般是这里为true造成的，可以改成false或删除属性

点关注不迷路,感谢支持！