vue3组合式api，组件的命名方法详解

在vue3组合式api中，我们可以用如下方式命名组件

export default{
    name:"componentsName",
    setup(){}
}

这样便可以轻松命名组件，但是我们通常使用setup语法糖形式(

1.默认生成组件名

当我们使用语法糖形式，但不给组件设置组件名时，组件会默认根据文件名字，给自己设置组件名（不算后缀），弊端显而易见，改组件名必须修改文件名，不自由，不好管理。

2.再写一个script专门命名用

<script setup></script>
<script>
export default{
    name:"componentsName",
}
</script>

上面的语法糖形式正常写逻辑代码，下面的script用来导出组件名，此方法弊端为两个script，很不美观，而且容易像我这样引起ts报错。

3.通过插件unplugin-vue-define-options

1.下载插件

//通过下面的指令下载插件
npm i unplugin-vue-define-options -D

2.1在vite.config.js/ts中配置

import Vue from '@vitejs/plugin-vue'
import DefineOptions from 'unplugin-vue-define-options/vite'

export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

​

2.2webpack环境下在vue.config.js配置

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

3，如果是ts，则在tsconfig.json中配置

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

4.通过defineoptions定义组件名name

defineOptions({
  name: "componentsName",
  inheritAttrs: false,
});

此方法弊端时name和inheritAttrs两个属性有可能被组件库的开发人员使用。

4.通过插件 unplugin-vue-setup-extend-plus

1.安装

npm i unplugin-vue-setup-extend-plus

2.1vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'

export default defineConfig({
  plugins: [vue(),vueSetupExtend({
    enableAutoExpose: true
  })],
})

2.2在webpack环境下vue.config.js配置

module.exports = {
  plugins: [
    require('unplugin-vue-setup-extend-plus/webpack').default({
        enableAutoExpose: true
     })
  ]
}

3. 然后就可以在script上随意定义组件名了

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

此插件github的链接，里面更全，有其他环境的配置，和选项