Vue3项目中给组件命名的方式详解
作者：账号已注销free
这篇文章主要介绍了两种在Vue3项目中给组件命名的方法：原生的export default方式和使用vite-plugin-vue-setup-extend插件的方式,通过代码介绍的非常详细,需要的朋友可以参考下
1. 不使用插件，通过 export default 设置组件名
<template>
<div></div>
</template>
<script lang="ts">
export default {
name: "CustomComponentName"
}
</script>
<script lang="ts" setup>
// 组合式 API 逻辑
</script>
<style scoped></style>说明：
这是 Vue 原生支持的方式，通过 export default 中定义 name 属性来设置组件名。
缺点是需要在 <script> 中额外写一个对象，略显冗余，且与 <script setup> 并用时存在两个 script 标签。
2. 推荐方式：使用 vite-plugin-vue-setup-extend 插件（支持在 <script setup> 中直接写 name）
<template> <div></div> </template> <script lang="ts" setup name="CustomComponentName"> // 组合式 API 逻辑 </script> <style scoped></style>
优点：
- 语法简洁，组件名与逻辑写在一起。
- 避免额外的 export default 块，更适合 <script setup> 风格。
3. 安装与配置 vite-plugin-vue-setup-extend
（1）安装依赖
npm install vite-plugin-vue-setup-extend -D
或使用其他包管理工具：
yarn add vite-plugin-vue-setup-extend -D # 或 pnpm add vite-plugin-vue-setup-extend -D
（2）配置 Vite（vite.config.ts）
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import VueSetupExtend from "vite-plugin-vue-setup-extend"
export default defineConfig({
plugins: [
vue(),
VueSetupExtend() // 启用组件名扩展
],
// 其他配置...
})（3）可选：TypeScript 支持
如果在 TypeScript 环境中希望获得 name 属性的类型提示，可在 env.d.ts 或 shims-vue.d.ts 中添加：
declare module "*.vue" {
import type { DefineComponent } from "vue"
const component: DefineComponent<{}, {}, any>
export default component
}该插件不强制要求类型声明，但添加后可提升开发体验。
总结
| 方式 | 优点 | 缺点 |
|---|---|---|
原生 export default | 无需插件，通用性强 | 代码冗余，与 <script setup> 配合不够优雅 |
vite-plugin-vue-setup-extend | 简洁、现代化，适合 <script setup> 风格 | 需要额外安装插件及配置 |
推荐在 Vite + Vue 3 项目中使用 vite-plugin-vue-setup-extend，以保持代码简洁统一。
以上就是Vue3项目中给组件命名的方式详解的详细内容，更多关于Vue3给组件命名方式的资料请关注脚本之家其它相关文章！