程序员小胖子之从设计图到npm发布组件过程

拿到的设计图长啥德行?


我脑海里YY到了哪些内容

我们拿到设计图可以看到,目前是两种toast,我们在封装组件的时候要考虑后面有可能增加其他样式的组件,所以我们在设计的时候,尽量要有拓展性

  • 一定要有type属性,依据type属性控制显示哪种类型的组件
  • 一定要有text属性,通过属性传入不同的文案
  • 一定要有timeout属性,通过属性传入,多少ms组件消失

裤子都脱了,该进入正题了,上代码





还有哪些改善?

toastIcon子组件的icon没有通过动态设置,后面如果设计出其他的icon的toast时,可把属性提出来,通过参数传递

Npm发布

发布包之前你首先要有一个npm的账号
在终端输入npm adduser,提示输入账号,密码和邮箱,然后将提示创建成功
然后,执行npm init,生成package.json
npm publish   //发布命令

没有结局的结局

toast-vue-mobile

github

你可能感兴趣的:(组件设计,组件化,npm,vue.js,javascript)