先声明一个组件:
<template> <div class="card"> <div class="card-header"> <div>主标题</div> <div>副标题</div> </div> <div class="card-content" v-if="content"> {{ content }} </div> </div> </template> <script setup lang="ts"> type Props = { content?: string } defineProps<Props>() </script> <style lang="less" scoped> @borderColor: #ccc; .card { border: 1px solid @borderColor; &:hover { box-shadow: 0 0 10px @borderColor; } &-header { display: flex; justify-content: space-between; padding: 10px; border-button: 1px solid @borderColor; } &-content { padding: 10px; } } </style>
然后在main.ts里注册
import Card from './components/Card/index.vue' //加载 app.component('Card', Card) //注册全局组件 app.mount('#app')