首先放一张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));};//检测Vueif (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.jsconst 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公布入门了。
收回来是做个整顿，心愿有须要的人也能够拿来入门，曾经贯通的大神，欢送指出其中有余。如果后续有新增或者改变会及时更新。