然后在项目根目录中创建一个src文件夹，里面新建一个KuButton.vue组件，这里你甚至可以通过vue的vue serve和vue build命令行来对单个*.vue文件进行快速原型开发，不过前提需要先额外安装一个全局的扩展
$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global
安装完成后，当你成功执行以下命令行后：
$ vue serve KuButton.vue就可以直接在浏览器访问 http://localhost:8080/
更多关于vue快速原型开发的知识，你可以查看官方文档
下面，我们开始完善Button按钮组件的代码，让它跑起来！
步骤 2: 完善组件代码，让按钮可配置化
这里我将模仿ElementUI库的Button组件，给大家揭晓它的奇妙之处！
模板 Template
<template>
<button
:class="[
'ku-button',
'ku-button--' + type,
'ku-button--' + size,
{
'ku-button--round': round
}
]"
@click="onClick">
<slot></slot>
</button>
</template>
JavaScript
<script>
export default {
props: {
type: {
type: String,
default: 'default',
validator(type) {
return ['default', 'primary', 'info', 'warning', 'danger'].includes(type)
}
},
round: {
type: Boolean,
default: false
},
size: {
type: String,
default: "medium",
validator(size) {
return ["medium", "small", "mini"].includes(size)
}
},
}, methods: {
onClick(event) {
this.$emit("click", event);
}
}
};
</script>
样式 Style
<style>
.ku-button {
display: inline-block;
outline: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
user-select: none;
cursor: pointer;
line-height: 1;
white-space: nowrap;
background-color: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
} /*颜色*/
.ku-button--default {
}
.ku-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.ku-button--success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
