1.   安装

npm install vue-styled-components

2.  在一个组件中引入

<template>
    <div>
        <StyleButton background='#000'>马上投标</StyleButton>
    </div>
    
</template>
<script>
   import styled from 'vue-styled-components';
   const btnProps = {
        background:{
            default:'#2fcea6',
            type:String
        },
        color:{
            default:'white',
            type:String
        },
        width:{
            default:'200px',
            type:String
        },
        height:{
            default:'40px',
            type:String
        },
        fontSize:{
            default:'16px',
            type:String
        },
        lineHeight:{
            default:'40px',
            type:String
        },
    }
   const StyleButton = styled('button',btnProps)`
        width:${props => props.width};
        height:${props => props.height};
        line-height:${props => props.lineHeight};
        background:${props => props.background};
        color:${props => props.color};
        font-size:${props => props.fontSize};
        border:none;
        border-radius:23px;
   `
    export default{
        components:{
            StyleButton
        }
    }
;
</script>

3. 在其他组建中使用