在npm上发布一个自己的Vue组件包

首先放一张cli的目录结构图

组件路径：src/components/组件文件夹/组件.vue
src/components/组件文件夹/index.js代码

import comFullCalendarTimeline from "./fullCalendarTimeline.vue";

comFullCalendarTimeline.install = (Vue) =>
  Vue.component(comFullCalendarTimeline.name, comFullCalendarTimeline);

export default comFullCalendarTimeline;

目的：引入组件，install组件，抛出对外引用

多个组件情况：组件都引入在components数组中，在src目录下新建index.js

//引入组件
import comFullCalendarTimeline from "./components/fullcalendar/index";
//定义组件列表
const components = [comFullCalendarTimeline];

//定义方法
const install = (Vue) => {
  //判断是否安装
  // if (install.installed) {
  //   return;
  // }
  // install.installed = true;
  //遍历注册组件
  components.map((component) => Vue.component(component.name, component));
};

//检测Vue
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  ...components,
};

不管是哪个index.js在export成功后，都可以在全局或者组件中进行import注册然后测试一下是否成功。
接着说打包配置：

package.js
"name": "XXX", //npm名
 "version": "1.9.0", //版本号
 "private": false, //是否私有，上传私有包是需要付费的
 "main": "./dist/fullcalendar.umd.js", //npm包的入口文件
 "scripts": {
      "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lib": "vue-cli-service build --target lib --name fullcalendar ./src/index.js", //这个是最主要的，指定组件打包命令
       "lint": "vue-cli-service lint"
  }

vue.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = {
  // devServer:{
  //   proxy:'http://192.168.61.22:8086'
  // },
  // mode: 'development',
  // entry: './index.js',
  // output: {
  //   path: path.resolve(__dirname, './dist'),
  //   publicPath: '/dist/',
  //   filename: 'index.js',
  //   library: 'excel-upload',
  //   libraryTarget: 'umd',
  //   umdNamedDefine:true
  // },
  css: {
    extract: false
  },
  publicPath:'./', //基本路径
  outputDir:"dist", //打包路径
  // assetsDir:"chunk",
  pages:{
    index:{
      entry:'./src/main.js', //主入口文件
    }
  },
  // configureWebpack:(config) => {
      // config.externals = {
      //   vue: "Vue",
      //   "element-ui": "ELEMENT",
      //   "vue-router": "VueRouter",
      //   vuex: "Vuex",
      //   axios: "axios"
      // };
  // },
  chainWebpack: (config) => {
    // 修复热更新失效
    // config.resolve.symlinks(true);
    if (process.env.NODE_ENV === 'production') {
      config.entryPoints.clear();
      config.entry("main").add("./src/index.js");
      config.output
        .filename("fullcalendar.js")//输出文件名
        .libraryTarget("umd")//输出格式
        .library("comfullcalendar");//输出库
    } 
    // config.devServer.host("localhost");
    config.plugin("provide").use(webpack.ProvidePlugin, [
      {
        $: "jquery",
        jquery: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
      },
    ]);
  },
};

需要注意：

css: {
    extract: false
  }

发布的组件没有样式需要这么设置，会一起把样式打包。

最后上传npm，首先需要注册npm账号，这些很简单，下边列一下常用的命令

npm publish --access public   //第一次上传
npm publish  //更新组件上传
npm version major/minor/patch  //指定版本更新
npm up 组件名 //更新该组件

最后引用

import XXX from package中的名字;
Vue.use(XXX );
相当于全局注册了，就可以随意使用组件标签引用组件了

写这个东西从注册npm到了解发布环节，调研、解决各个版本问题等断断续续了三个工作日左右，可以说是因为很多基础概念的用法没有那么的融会贯通。
这只是一个大概的版本，打包性能优化之类的我还并没有入手去做，但是始终算是npm发布入门了。
发出来是做个整理，希望有需要的人也可以拿来入门，已经贯通的大神，欢迎指出其中不足。如果后续有新增或者改动会及时更新。