005、Vue3+TypeScript基础，组合式API给子页面命名的2种方式

01、App.vue代码如下：

<template>
  <div class="app">
    <h1>好好学习，天天向上</h1>
    <Person/>
  </div>
</template>

<script>
// JS或TS
import Person from './view/PersonNew.vue'

export default {
  // App为根组件
  name: 'App',
  // 注册Person组件，注册后，在本单元中可以直接使用Person组件
  components: {Person}
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

02、代码如下：

<template>
  <div class="person">
    <h2>姓名{{ name }}</h2>
    <h2>年龄{{ age }}</h2>
    <h2>地址{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!--第一种写法，就是2个script标签-->
<script lang="ts">
export default {
  name: 'PersonNew001',
}
</script>

<!--需要写上setup-->
<script lang="ts" setup>
import {ref} from 'vue'

// 定义数据
let name = ref('张三')
let age = ref(18)
let address = ref('圣弗兰-西斯科')

// 对数据的修改都需要加上.value
function changeName() {
  name.value = '李四'
}

function changeAge() {
  age.value += 1
}

function showTel() {
  alert('13800138000')
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

03、效果如下：

 04、命令行安装npm i vite-plugin-vue-setup-extend -D，并引入这个插件，vite.config.js代码如下：

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入vue-setup-extend插件
import vueSetupExtend from 'vite-plugin-vue-setup-extend'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 引入vue-setup-extend插件
        vueSetupExtend()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        //这里就是代理，开启后怎么定义的，就在前面怎么加前缀
        proxy: {
            '/proxy': {
                target: 'http://localhost/',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/proxy/, '')
            }
        }

    }
})

05、如图所示的引入

 06、PersonNew.vue代码如下：

<template>
  <div class="person">
    <h2>姓名{{ name }}</h2>
    <h2>年龄{{ age }}</h2>
    <h2>地址{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<!--第一种写法，就是2个script标签-->
<!--<script lang="ts">-->
<!--export default {-->
<!--  name: 'PersonNew001',-->
<!--}-->
<!--</script>-->

<!--需要写上setup-->
<script lang="ts" setup name = "PersonNew002">
import {ref} from 'vue'

// 定义数据
let name = ref('张三')
let age = ref(18)
let address = ref('圣弗兰-西斯科')

// 对数据的修改都需要加上.value
function changeName() {
  name.value = '李四'
}

function changeAge() {
  age.value += 1
}

function showTel() {
  alert('13800138000')
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

07、效果如下