1、使用 Vue3 封装 Button 组件（一）

一、Button组件架构设计以及需求分析；

1、任务：

      需求分析、初始化项目、确定项目文件结构、规范基础写法、样式解决方案以及色彩系统

2、需求分析：

      Button组件大部分关注样式，没有交互

      根据分析可以得到具体的属性列表：

      type：不同的样式 （Default、Primary、Danger、Info、Success、Warning）

      plain：样式的不同展现模式boolean

      round：圆角boolean

      circle：圆形按钮，适合图标boolean

      size：不同大小（small、normal、large）

      disabled：禁用boolean

       图标：后面再添加

       loading：后面再添加

3、Button组件的本质：就是 class 名称的组合

class="vk-button-primary vk-button-large is-plain is-round is-disabled"

二、初始化项目以及项目文件结构；

三、Button组件编码第一部分；

四、安装使用Vue Macros；

五、Button编码第二部分；

六、选取CSS解决方案；

七、色彩设计；

八、添加色彩变量；

九、添加CSS Reset；

十、给Button添加样式；

十一、使用PostCSS生成对应CSS颜色变量；

十二、Button总结；