Vue3 使用setup语法糖时，组件name命名

2024-04-18 618 阅读1分钟

1. 多使用一个 `<script>` 标签命名

<script>
  export default {
    name: 'Person'
  }
</script>
<script setup>
  ...
</script>

2.使用插件

安装插件 vite-plugin-vue-setup-extend

pnpm install vite-plugin-vue-setup-extend -D

在vite.config文件引入

 import VueSetuoExtend from 'vite-plugin-vue-setup-extend'

 export default defineConfig({
  plugins: [
    VueSetuoExtend()
  ]
})

使用

<script setup name="Person"></script>

3.使用`defineOptions`Vue版本需要3.3+。（官方文档）

<script setup> 
  defineOptions({
    name: 'Person'
  })
</script>