发布vue组件到npm上的详细过程和npm login失败的解决方案

需求

为了方便组件的使用，将vue组件打包并发布到npm上，或者直接利用到项目中引入使用
实现
利用脚手架创建项目 vue create demo
创建好之后在目录新建一个packages目录用于存放组件，当然也可以在src中创建一个目录存放

由于创建了packages目录在src外部，脚手架不会对该目录编译，因此需要配置webpack进行编译，在vue.config.js文件中配置

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add('/packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          return options
        })
  }
}

创建组件目录和组件入口，先在packages目录下创建一个zlDemo文件和一个index.js文件，用来配置该目录下的组件

// packages/index.js
import zlDemo from './zlDemo'

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

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  zlDemo
}

创建组件，在packages/zlDemo目录下创建index.js和index.vue组件文件，代码如下

// packages/zlDemo/index.js
import zlToast from './index.vue'

zlToast.install = function (Vue) {
  Vue.component(zlToast.name, zlToast)
}

export default zlToast

// packages/zlDemo/index.vue
<template>
  <div class="zl-demo ceshi">
    这是一个demo
  </div>
</template>

<script>
export default {
  name: 'zlDemo'
}
</script>

<style>
</style>

配置打包命令，在package.json文件中添加lib命令用于打包

// package.json
"scripts": { // 配置打包命令
    "lib": "vue-cli-service build --target lib --name  zlDemo1 --dest lib packages/index.js"
  }
  "private": false, // 公开
  "name": "zlDemo", // 组件名称
  "version": "0.1.0", // 版本号
  "author": "zhanle_huang", // 作者

打包后可以直接引入“名称.umd.js”到相同vue版本的项目使用，使用方式有两种

// 在main.js中引入
import zldemo from './zldemo.js'
app.use(zldemo)
// 在组件中引入
import zldemo from './zldemo.js'
// 这里需要注意了,需要采用这种方式进行注册
export default {
    components: {
    // 这里的xxx表示定义packages/index.js下定义的名称
        zldemo: zldemo.xxx 
    },

注册npm账号
地址：npm官网.
注册好之后打开项目根目录执行 npm login
登录成功之后再执行npm publish就会提示完成（发布前可以npm i 包名）看看有没有重复，有就改名字
登录失败的一个错误解决方案https://blog.csdn.net/ta_huang/article/details/122615787?spm=1001.2014.3001.5501.