这是我在学习 Vue 过程中,做的一个 UI 库,希望对你有用。
- CSS 样式
使用本框架,请在CSS中开启 border-box
*,*::before,*::after{box-sizing:border-box}
IE 8 及以上浏览器都支持此样式。
你还需设置默认颜色变量(后续会改为SCSS变量)
html{
--button-height:32px;
--font-size:14px;
--button-bg:white;
--button-active-bg:#eee;
--border-radius:4px;
--color:#333;
--border-color:#999;
--border-color-hover:#666;
}
IE 15 及以上浏览器都支持此样式。
- 安装 Cola UI
npm i --save cola-ui
- 引入
import {Button,ButtonGroup,Icon} from 'cola-ui'
import 'cola-ui/dist/index.css'
export default {
name: 'app',
components: {
'z-button':Button,
'z-icon':Icon
}
}