npm发布自己的组件

作为一个前端打工人，可以尝试自己编写一些UI组件。

编写组件虽说不一定要使用，但也可以更好的提升自己的能力，在编写的过程中让自己思考变得更加全面

组件编写好之后肯定不能以后调用时就复制文件夹过去，这样太low了。前端人员可以将组件发布到npm上，以后就可以npm install下载自己的组件

npm发布流程

一、创建npm账号

npm官网：npm官网

注册npm的账号非常简单，只需要一个邮箱即可，连手机都不需要

二、创建自己的组件

我创建的vue组件，npm init新建一个项目
在npm初始化时

• package name代表以后组件的名称
• version代表当前版本号
• desrciption可以描述一下该组件
• entrt point代表进入文件，默认index.js即可
• keywords代表关键词
• author 作者
• license 代表协议，npm是使用ISC，默认即可

这样项目的package.json就出来了

三、组件配置index.js

编写好一部分组件之后，可以将这些组件配置到index.js当中

index.js配置代码:

/*
* @author kongchengji
* Date: 2021/2/1
*/
import Vue from 'vue'

import wzc_select from "./select/wzc-select";
import wzc_option from "./select/wzc-option";
import wzc_button from "./button/wzc-button";
import wzc_switch from "./Switch/wzc-switch";
import wzc_slider from "./Slider/wzc-slider";
import wzc_collapse from "./Collapse/wzc-collapse";
import wzc_collapse_item from "./Collapse/wzc-collapse-item";
import wzc_color_picker from "./ColorPicker/wzc-color-picker";
import wzc_timeline from "./TimeLine/wzc-timeline";
import wzc_timeline_option from "./TimeLine/wzc-timeline-option";
import wzc_dividingline from "./DividingLine/wzc-dividingline";
import wzc_picview from "./PicView/wzc-picview"

const components = [
    wzc_select,
    wzc_option,
    wzc_button,
    wzc_switch,
    wzc_collapse,
    wzc_collapse_item,
    wzc_color_picker,
    wzc_slider,
    wzc_timeline,
    wzc_timeline_option,
    wzc_dividingline,
    wzc_picview,
]

const install = function(Vue) {
    
    
    if(install.installed) return
    components.map(component => Vue.component(component.name, component))
    // Vue.prototype.$message = Message
  }
  
  
export default {
    
    
    install,
    wzc_select,
    wzc_option,
    wzc_button,
    wzc_switch,
    wzc_collapse,
    wzc_collapse_item,
    wzc_color_picker,
    wzc_slider,
    wzc_timeline,
    wzc_timeline_option,
    wzc_dividingline,
    wzc_picview,
}

四、终端登录npm和发布npm

在终端中输入npm login可以进行登录
输入账号，密码，邮箱
密码在输入时不会进行显示

发布npm时，使用npm publish进行发布

发布成功后，邮箱会默认接收到一份发布成功的邮件
此时在你的npm仓库中可以看到发布的组件了

五、npm修改

如果自己的组件有缺陷，想要修改，在修改后使用npm publish提交时不要忘记修改版本号，否则会发布失败

失败的发布