手把手教你封装vue组件并发布到npm

/*styleslightly*/前言在开发项目的过程中，通常会用到很多功能和设计相似的组件。为了避免重新发明轮子，我们经常会使用一些第三方组件。比如vux，vant。但这会引入太多未使用的组件，导致封装体积过大。所以我们有必要封装一些基础组件进行开发。接下来介绍如何封装vue的toast和dialog组件上传到npm。GitHub：github.com/Michael-lzg...掘金：https://juejin.im/post/5dc8c1...扫描下方二维码，先睹为快。组件封装的必要性，提高开发效率，避免重复造轮子调用同一个组件，统一的UI风格，方便协同开发，提高可维护性，减少第三方组件的使用，定制个性化组件toast和dialog组件封装toast和dialog组件基本上每个手机项目都会用到，下面我会介绍如何将这两个组件打包发布到npm下载。1.必要的知识储备vue基础知识vue.extend构造函数$mount手动挂载实例vue组件传值传参了解vue构造函数和原型webpack包npm基础知识最后我们要实现这个效果，从npm包下载依赖，直接调用this.$toast({msg:'手机号不能为空'})this.$toast({msg:'成功提示',type:'成功'})this.$dialog({title:'删除提示',text:'Areyousureyouwanttodeletethislabel?',showCancelBtn:true,confirmText:'Confirm',confirm(content){alert('删除成功')}})效果图如下2.写组件根据输入的类型决定弹窗的类型（成功提示、失败提示、警告、加载、纯文本）并设置弹窗消失的时间/*styleslightly*/3.注册toast组件3.1，使用Vue.extend构造函数将toast组件挂载到vue实例上{}instance=newToast({data:options})instance.vm=instance.$mount()document.body.appendChild(instance.vm.$el)returninstance.vm}在main.js中导出默认的toast3.2引入toast价格并挂载到vue原型上i??mportVuefrom'vue'importtoastfrom'./components/toast'Vue.prototype.$toast=toast此时直接在项目中调用该组件即可。对话框组件的封装也是同样的方法。下面介绍如何将组件发布到npm。发布npm组件1.在src下新建index.js文件，导入需要上传的组件。这里Vue主要用来注册组件和插件。Vue.component(key,val)Vueu.use()从'./components/toast'importdialogfrom'./components/dialog'constYMUI={//这里是后面添加的组件}constinstall=function(Vue,opts={}){if(install.installed)returnObject.keys(YMUI).forEach(key=>{Vue.component(key,YMUI[key])})Vue.prototype.$toast=toastVue.prototype.$dialog=dialog}//自动安装if(typeofwindow!=='undefined'&&window.Vue){install(window.Vue)//importallviause}constAPI={install,...YMUI}exportdefaultAPI//通过plugin单独导入2.修改webpack.dist的.prod.conf的打包配置入口：入口文件配置，入口文件为index.jsfilename：打包文件的名称libraryTarget：配置webpack打包内容module方法的参数module.exports={context:path.resolve(__dirname,'../'),入口:{app:'./src/index.js'},输出:{路径:config.build.assetsRoot,文件名:'vue-mobile-ymui.js',libraryTarget:'umd',umdNamedDefine:true,publicPath:pprocess.env.NODE_ENV==='生产'?config.build.assetsPublicPath:config.dev.assetsPublicPath}}3.修改package.json的配置名称：组件名称version：版本号main:字段，指定npmpackageReferencedentry（记得加上，和文件名应该和上面第二点一致）{"name":"vue-mobile-ymui","version":"1.0.3","description":"amobilecompoment","author":"lzg","private":false,"main":"./dist/vue-mobile-ymui.js","scripts":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","start":"npmrundev","lint":"eslint--ext.js,.vuesrc","build":"nodebuild/build.js","build-js":"webpack--configbuild/webpack.dist.prod.conf.js"},}4.发布npm组件1.npmlogin注册并登录npm账号2.npmpublish发布组件注意：必须先注册邮箱。包名不能有大写字母/空格/下划线，不能重复。五、升级npm包1.将修改后的代码打包2.修改包版本（package.json中的version字段）version字段表示为："version":"x.y.z"变化较大，不能向下兼容。添加x会增加新功能，但它仍然向后兼容。Addyfixbugs,smallchanges,addzusingnpmcomponents1.安装依赖于npminstallvue-mobile-ymui2.importinmian.jsanduse()importUIfrom'vue-mobile-ymui'Vue.use(UI)3.直接在页面调用this.$toast({msg:'successprompt',type:'success'})。期待到此，封装vue组件发布到npm并调用的方法就完成了后续继续封装其他组件，请关注相关文章搭建vue-cli移动端H5开发模板搭建从零开始一个webpack项目总结几种webpack打包优化方法阅读本文所有的前端路由，后端路由，单页应用，多页应用从一道面试题总结JS的范围，这点和箭头functions关于几种手机??软键盘的坑及其解决方法谈谈JavaScript中的防抖和节流总结数组去重的几种方法谈谈JavaScript的深拷贝和浅拷贝