npm+vue-cli发布vue自定义组件

时间：2023-04-01 00:43:32 vue.js

.content{height:100%;显示：弹性；证明内容：居中；对齐项目：中心；}.center_text{位置：绝对；颜色：#1890ff；字体大小：22px；font-weight:bold;}npm+vue-cli发布vue自定义组件。在日常开发中，我们经常会封装一些组件。在多个项目中修改组件非常麻烦。我们可以将这些经常使用的组件发布到npm中进行统一管理，这样可以大大提高我们的工作效率，甚至可以在后期封装一套自己的组件库；使用vue-cli在项目components目录下快速创建自定义组件；以vue-cricleprogressbar组件为例"width":height="width"xmlns="http://www.w3.org/2000/svg">{{progress}}%

.content{height:100%;显示：弹性；证明内容：居中；对齐项目：中心；}.center_text{位置：绝对；颜色：#1890ff；字体大小：22px；font-weight:bold;}创建src/index.js时，有两种方法//方法一，直接导入组件，不能全局注册importCircleProgressfrom'./components/CircleProgress.vue';exportdefaultCircleProgress;//方法二，提供install方法让组件按需导入importCircleProgresscleProgressfrom'./components/CircleProgress.vue';CircleProgress.install=function(Vue){Vue.component(CircleProgress.name,CircleProgress)}exportdefaultCircleProgressconfigurationpackage.jsonfile{"name":"vue-circleprogressbar",//组件名称"version":"1.2.2",//组件版本号"private":false,"main":"lib/vue-circleprogressbar.umd.min.js",//组件入口,in"scripts"在scripts.package命令中生成：{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint","package":"vue-cli-servicebuild--targetlib--namevue-circleprogressbar--destlib./src/components/index.js",//创建lib文件夹，将打包好的组件导入thefileFolder},"keywords":[],"author":[],"license":"MIT","dependencies":{},"devDependencies":{}}到这里本地开发工作基本完成，下一步是将本地组件推送到npm。首先需要在npm上创建一个账号，在终端执行npmlogin。输入你注册的npm账号和密码，执行npmpublish。如果没有问题，组件就会成功上传到npm。可以像引入其他组件一样，直接使用npminstall安装组件。不清楚的可以参考我写的vue-circleprogressbar组件的源码：vue-circleProgress组件