先放一个cli目录结构图组件路径：src/components/componentfolder/component.vuesrc/components/componentfolder/index.js代码importcomFullCalendarTimelinefrom"./fullCalendarTimeline.vue";comFullCalendarTimeline.install=(Vue)=>Vue.component(comFullCalendarTimeline.name,comFullCalendarTimeline);exportdefaultcomFullCalendarTimeline;用途：导入组件，安装组件，抛出外部引用到多个组件：component组件中都引入了数组，并在src目录下新建一个index.js//导入组件importcomFullCalendarTimelinefrom"./components/fullcalendar/index";//定义组件列表constcomponents=[comFullCalendarTimeline];//定义方法constinstall=(Vue)=>{//判断是否安装//if(install.installed){//return;//}//install.installed=true;//遍历注册组件components.map((component)=>Vue.component(component.name,component));};//检测Vueif(typeofwindow!=="undefined"&&window.Vue){install(window.Vue);}exportdefault{install,...components,};不管哪个index.js导出成功，都可以在全局或者组件中注册导入，测试是否成功。然后说打包配置：package.js"name":"XXX",//npmname"version":"1.9.0",//版本号"private":false,//是否私有，上传一个需要私有包付费"main":"./dist/fullcalendar.umd.js",//npm包入口文件"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lib":"vue-cli-servicebuild--targetlib--namefullcalendar./src/index.js",//这个最重要，指定组件打包命令"lint":"vue-cli-servicelint"}vue.config.jsconstpath=require("path");constwebpack=require("webpack");module.exports={//devServer:{//代理：'http://192.168.61.22:8086'//},//mode:'development',//entry:'./index.js',//output:{//path:path.resolve(__dirname,'./dist'),//publicPath:'/dist/',//文件名:'index.js',//library:'excel-upload',//libraryTarget:'umd',//umdNamedDefine:true//},css:{extract:false},publicPath:'./',//基本路径outputDir:"dist",//p打包路径//assetsDir:"chunk",pages:{index:{entry:'./src/main.js',//main入口文件}},//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("本地主机");config.plugin("provide").use(webpack.ProvidePlugin,[{$:"jquery",jquery:"jquery",jQuery:"jquery","window.jQuery":"jquery",},]);},};注意：css:{extract:false}发布的组件没有需要这样设置的样式，样式会一起打包最后，要上传npm，首先需要注册一个npm账号。这些都很简单。下面是常用命令npmpublish--accesspublic//首先上传npmpublish//更新组件上传npmversionmajor/minor/patch//指定版本updatenpmupcomponentname//更新组件最后引用name从包中导入XXX；Vue.use(XXX);相当于全局注册，可以随意使用组件标签来引用组件。写这个东西从注册npm到了解release链接，研究，解决各个版本的问题断断续续用了大概三个工作日。可以说很多基本概念的用法并没有那么好综合。这只是一个粗略的版本。打包性能优化之类的东西我还没有开始做，不过还是npm发布入门。整理发出来，希望有需要的小伙伴也可以用上手。已经深入的欢迎指出不足之处。以后如有新增或变更，会及时更新。
