修改main.ts
不需要默认的样式，注销掉下面代码：
// import './assets/main.css'
创建 Student.vue 组件
在 components 目录下创建 Student.vue 文件，内容如下：
<template>
显示在页面中的内容：<br>
姓名：{{name}}<br>
年龄：{{age}}<br>
性别：{{sex}}<br>
身高：{{height}}<br>
</template>
<script lang="ts">
export default{
name:'Student',
setup(){
// 必须 return，模板才能访问
return {
name:'李雷',
age:20,
sex:'男',
height:1.82
}
}
}
</script>
<style>
</style>
解释：
setup()：vue3推荐使用组合式api，定义
setup()函数，必须 返回对象，模板才能访问{{name}}：是插值表达式，里面的值是
setup()函数返回对象的key，页面渲染时，就会显示对应的值
修改 App.vue 文件
默认内容较多，看起来乱码，删除原有内容，改为下面内容：
<template>
<!-- 使用 Student 组件 -->
<Student/>
</template>
<script setup lang="ts">
// 引入 Student 组件
import Student from './components/Student.vue'
</script>
<style scoped>
</style>