需求分析:
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显示自定义组件
运行结果: