关于npm:在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公布入门了。
收回来是做个整顿，心愿有须要的人也能够拿来入门，曾经贯通的大神，欢送指出其中有余。如果后续有新增或者改变会及时更新。