Vue3中给组件添加name属性的方法（亲测好用）

在Vue2.x的写法中，我们可以很方便的给组件添加name属性，就像这样：

export default{
    name:'demo'
}

在Vue3.x中，虽然也可以用上面的写法，但如果不想在setup中使用return,直接把setup写成script标签属性的形式，这种情况下就没法直接给组件添加name属性。如果非要添加name属性，可以下载一个插件unplugin-vue-define-options:

第一步、下载插件

npm install unplugin-vue-define-options -D

第二步、在vue.config.js中配置

这里以VueCLI的配置方式为例

const defineOptions = require("unplugin-vue-define-options/webpack");
module.exports={
    configureWebpack: {
    plugins: [defineOptions()],
  },
}

第三步、在组件中使用

<script setup lang='ts'>
defineOptions({
  name: 'demo'
})
</script>

在组件中使用defineOptions的时候，如果出现no-undef错误（我遇见了）

这时候找到.eslintrc.js这个文件，添加以下配置，就可以使用了:

globals: {
    defineOptions: true,
  },