介绍
Vue3 创建第一个页面-setup() 的 setup() 函数写法有些麻烦，Vue3 提供语法糖，写起来更简单
语法
定义 <script lang="ts" setup> 标签
注意：
必须有
lang="ts"，表示 typescript语言，否则报错必须加上
setup标识
在标签中直接定义变量即可，插值表达式可以正常显示：
<script lang="ts" setup>
let name = '李雷'
let age = 20
let sex = '男'
let height = 1.82
</script>
修改 Student.vue 组件
内容如下：
<template>
姓名：{{name}}<br>
年龄：{{age}}<br>
性别：{{sex}}<br>
身高：{{height}}<br>
</template>
<script lang="ts">
export default{
name:'Student',
}
</script>
<script lang="ts" setup>
let name = '李雷'
let age = 20
let sex = '男'
let height = 1.82
</script>
<style>
</style>
缺点
需要编写下面部分：
<script lang="ts">
export default{
name:'Student',
}
</script>
解决
安装插件后，可不写 这部分
安装插件
npm i vite-plugin-vue-setup-extend -D
解释： -D 表示开发插件
修改 vite.config.ts 文件
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
plugins: [
vue(),
vueDevTools(),
VueSetupExtend(), // 启用 VueSetupExtend
],
重启服务
npm run dev
修改 Student.vue 组件
去掉下面代码
<script lang="ts">
export default{
name:'Student',
}
</script>
在下面标签中
<script lang="ts" setup >
加上：name='Student'
完整代码
<template>
姓名：{{name}}<br>
年龄：{{age}}<br>
性别：{{sex}}<br>
身高：{{height}}<br>
</template>
<script lang="ts" setup name='Student'>
let name = '李雷'
let age = 20
let sex = '男'
let height = 1.82
</script>
<style>
</style>