Vue3中使用setup如何定义组件name属性

方式1：加多一个script标签，使用vue2的写法设置name

<template></template>
<script lang="ts">
export default{
  name:'xxx'
}
</script>
<script lang="ts" setup>
    ...
</script>

方式2：加多一个script标签，使用vue3的原始写法设置name

<template></template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
  name:'xxx'
})
</script>
<script lang="ts" setup>
    ...
</script>

方式3：借助插件unplugin-vue-define-options

以vue cli + typescript + eslint的项目为例

首先，安装插件

npm install unplugin-vue-define-options@0.7.3 -D

由于项目是采用了vue2.7, 发现安装最新版的unplugin-vue-define-options，使用时会报 defineOptions is not defined，查找了资料说是插件本身还不支持，最后安装了0.7.3版本得到完美解决

然后，配置vue.config.js

configureWebpack: {
    plugins: [require('unplugin-vue-define-options/webpack')()]
}

接着，在tsconfig.json中设置types

{
  "compilerOptions": {
    "types": ["unplugin-vue-define-options"]
}

紧接着，在.eslintrc.js中设置globals选项，当然若项目中没有使用eslint，此步可忽略

module.exports = {
   globals: { defineOptions: 'writable' }
}

最后，使用方式如下：

<template></template>
<script lang="ts" setup>   
    defineOptions({
      name: 'xxxx'
    });
</script>