Vue3 创建第一个页面-setup语法糖、简化模块名-马育民老师

# 介绍

[Vue3 创建第一个页面-setup()](https://www.malaoshi.top/show_1GW1GieJ8Mqg.html "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>
```

# 解决

安装插件后，可不写 这部分

### 安装插件

```
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>
```

##### 加上 name='Student'

在下面标签中
```
<script lang="ts" setup >
```

加上：`name='Student'`

##### 完整代码

```
<template>
	姓名：{{name}}<br>
	年龄：{{age}}<br>
	性别：{{sex}}<br>
	身高：{{height}}<br>
</template>