如何搭建Vue组件库

PaulChess commented 2 years ago

基于varlet-vue2 基于vant

PaulChess commented 2 years ago

命令:

"dev": "varlet-vue2-cli dev",
"build": "varlet-vue2-cli build",
"preview": "varlet-vue2-cli preview",
"compile": "varlet-vue2-cli compile",
"test": "varlet-vue2-cli jest",
"test:watch": "varlet-vue2-cli jest -w",
"test: watchAll": "varlet-vue2-cli jest -wa"

PaulChess commented 2 years ago

Button: 先把基本样式写出来，然后再考虑黑夜模式

按钮的组件设计中有一个问题: 如UI稿中小尺寸按钮宽度为 64px, 左右两侧padding为 20px, 文字为 "按钮"，但是在文字展示为 "小按钮" 的时候其宽度依然为 64px, 左右两侧padding为 14px, 看似要设置一个 max-width, 并随之相应改变 padding 的大小，但是如果文字比较长，其实际宽度必然要超过设定的这个宽度，所以其中的尺寸算法究竟如何是一个需要探讨的问题。

PaulChess commented 2 years ago

基本样式:

|__styles
     |__ var.less 字体大小、颜色、等原子类
     |__ common.less 通用样式

PaulChess commented 2 years ago

关于字体的整理比如 PingFangSC-Regular

PaulChess / MyBlog

如何搭建Vue组件库 #31