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

需求

1. 为了方便组件的使用，将vue组件打包并发布到npm上，或者直接利用到项目中引入使用

实现

1. 利用脚手架创建项目 vue create demo
2. 创建好之后在目录新建一个packages目录用于存放组件，当然也可以在src中创建一个目录存放
   
3. 由于创建了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
           })
     }
   }
   

4. 创建组件目录和组件入口，先在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
   }
   
   

5. 创建组件，在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>
   
   

6. 配置打包命令，在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", // 作者
   

7. 打包后可以直接引入“名称.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 
       },
   

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

总结

按照上述步骤就可以打包一个属于自己的npm组件并发布到npm上，这是博主自己发布的一个测试包地址https://www.npmjs.com/package/zl-democs1. 可以下载来看看，里面代码是完整的

注：喜欢前端或者正在学习前端可以关注博主学习更多前端知识