vue3.x教程-创建第一个页面-setup()函数实现 作者：马育民 • 2025-06-07 21:22 • 阅读：10032 # 修改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> ``` 原文出处：/show_1GW1GieJ8Mqg.html