把vue组件发布到npm

桃扇骨 2023-03-01 13:38 14阅读 0赞

> 一直以来项目都使用他人开发的组件，于是乎自己也想倒腾着做一个，发布到npm 在其他项目里直接使用，这个组件上传和纯js 还是有一定区别的，在这个过程中也遇到了一些小问题，网上找了许多案例，都不是太全面，趁有时间自己记录一下

![在这里插入图片描述][20200726233251481.gif]

参考网上[大佬案例][Link 1]改装一个适合自己需求的运动的时间刻度

### 一、项目创建 ###

首选是创建一个项目，这个就不用说了，大家都会

c:> vue create my-project

### 二、组件编写 ###

在src/components下创建一个TimeAxisAuto.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]

### 三、全局注册 ###

再建一个indx.js来进行组件全局注册

import Vue from "vue";
    import TimeAxisAuto from "./TimeAxisAuto.vue";
    
    const Components = { 
      TimeAxisAuto
    };
    
    Object.keys(Components).forEach(name => { 
        Vue.component(name, Components[name]);
    });
    
    export default Components;

### 四、配置package.json ###

其中大致配置

{ 
      "name": "time-axis-auto", // 包名字
      "version": "0.1.3", //包版本，x.x.x的格式，符合语义化版本规则
      "description": "It is a running timeline component. ", //一些描述信息
      "main": "./dist/time-axis-auto.common.js", // 入口文件，这里指定为dist目录下打包生成的js
      "author": "dex", //作者信息
      "email": "d1236688@163.com", // 邮件地址
      "license": "ISC",// 许可证，默认是ISC、有的默认是MIT
      "scripts": {  // 运行脚本命令
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "distribute": "vue-cli-service build --target lib --name time-axis-auto ./src/components/index.js" // 这里我们使用@vue/cli 3.0自带的打包功能，将项目打包
      },
      "bugs": { 
        "url": "https://github.com/dengxiaoning/time-axis-auto.git"
      },
     }

### 五、 配置vue.config.js ###

module.exports = { 
      publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
      css:{  // 这一步配置将css强行内联，否则发布后的组件在使用时不会携带css
        extract:false
      }
    }

`publicPath: process.env.NODE_ENV === 'production' ? './' : '/',`这步用于修改vue加载资源目录

`css:{ // 这一步配置将css强行内联，否则发布后的组件在使用时不会携带css extract:false }`

### 六、 打包发布 ###

好了配置完成后

###### 1. 执行`npm run distribute`将项目打包 ######

/  Building for production as library (commonjs,umd,umd-min)...
    
     DONE  Compiled successfully in 2551ms                                                                          18:49:03
    
    -  Building for production as library (commonjs,umd,umd-min)...
    
     DONE  Compiled successfully in 2713ms                                                                          18:49:03
    
    /  Building for production as library (commonjs,umd,umd-min)...
    
     DONE  Compiled successfully in 3184ms                                                                          18:49:04
    
      File                              Size                 Gzipped
    
      dist\time-axis-auto.umd.min.js    21.79 KiB            11.32 KiB
      dist\time-axis-auto.umd.js        44.76 KiB            16.82 KiB
      dist\time-axis-auto.common.js     44.28 KiB            16.67 KiB
    
      Images and other types of assets omitted.

###### 2. 再执行 npm publish ( 取消发布 npm unpublish --force xxx包名 ) ######

ok 发布成功

直接 `npm install time-axis-auto --save`

.vue `import 'time-axis-auto'` 即可全局使用了

[练习案例在线demo https://www.benpaodehenji.com/timeline/][demo https_www.benpaodehenji.com_timeline]

[源码地址 https://github.com/dengxiaoning/time-axis-auto.git"][https_github.com_dengxiaoning_time-axis-auto.git]

[20200726233251481.gif]: /images/20230208/4f4d2f7c2d684c3ea5b7df1a79693c9c.png
[Link 1]: https://www.jianshu.com/p/fb51fe44ff47
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200726222607420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[demo https_www.benpaodehenji.com_timeline]: https://www.benpaodehenji.com/timeline/
[https_github.com_dengxiaoning_time-axis-auto.git]: https://github.com/dengxiaoning/time-axis-auto.git