Vue3组件库开发 之Button(1)

发布时间:2024年01月16日

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

运行结果:

文章来源:https://blog.csdn.net/dallasnash/article/details/135636300
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。