作为一个前端打工人,可以尝试自己编写一些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
提交时不要忘记修改版本号,否则会发布失败
失败的发布