把vue組件發布到npm

 

一直以來項目都使用他人開發的組件，於是乎自己也想倒騰着做一個，發布到npm 在其他項目里直接使用，這個組件上傳和純js 還是有一定區別的，在這個過程中也遇到了一些小問題，網上找了許多案例，都不是太全面，趁有時間自己記錄一下

參考網上大佬案例改裝一個適合自己需求的運動的時間刻度

一、項目創建

首選是創建一個項目，這個就不用說了，大家都會

c:> vue create my-project

 

二、組件編寫

在src/components下創建一個TimeAxisAuto.vue

三、全局注冊

再建一個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": "[e-mail]", // 郵件地址
  "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/

源碼地址 https://github.com/dengxiaoning/time-axis-auto.git"