发布组件到npm

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

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

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

//组件
<template>
    <div>
        <button>按钮组件</button>
    </div>
</template>
<script>
export default {
    name: 'ComButton'
}
</script>
//====================================分割线============================================
//方法utils
const  func1=()=>{
   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.publicFunc
Vue.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中引入组件和方法
import  zqcom  from 'zqcom'
Vue.prototype.$Public=zqcom.publicFunc
Vue.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或删除属性

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