Vue3组件库开发 之Button(1)

需求分析：
Button 组件大部分关注样式，没有交互
根本分析可以得到具体的属性列表：
type:不同的样式(Default,Primary,Danger,Info,Success,Warning)
plain:样式的不同展现模式boolean
round:圆角boolean
circle:圆形按钮，适合图标boolean
size:不同大小(small/normal/large)
disabled:禁止boolean

Button 组件的本质
class='vk-button-primary vk-button-large is-plain is-round is-disabled'
vue官方基于vite的封闭工具 create-vue/eslint-config-typeScript
https//github.com/vuejs/create-vue

npm create vue@3
Vite+Vue3+TypeScript+Eslint

components
  Button.vue        组件
  style.css         样式
  type.ts           typescript类型
  Button.test.tsx   测试文件

1、新建项目

使用vite封装工程 create -vue

npm run dev

2、新建类型文件types.ts

3、Button组件

4、APP.vue显示自定义组件 

运行结果：