Vue3项目中给组件命名的方式详解

更新时间：2026年04月15日 08:43:30 作者：账号已注销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给组件命名方式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解三种方式解决vue中v-html元素中标签样式
这篇文章主要介绍了三种方式解决vue中v-html元素中标签样式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
element plus el-form双列布局及拓展任意布局的实现
本文介绍了如何实现和拓展一个双列布局的人员信息表单,并通过封装el-form和Layout.vue组件,实现了更加灵活和可扩展的表单布局
2026-02-02
vue第三方库中存在扩展运算符报错问题的解决方案
这篇文章主要介绍了vue第三方库中存在扩展运算符报错问题,本文给大家分享解决方案，通过结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-07-07
Vue项目打包部署到GitHub Pages的实现步骤
本文主要介绍了Vue项目打包部署到GitHub Pages的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
vue报错之exports is not defined问题的解决
这篇文章主要介绍了vue报错之exports is not defined问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue3+Element Plus实现el-table跨行显示(非脚手架)
这篇文章主要介绍了Vue3+Element Plus实现el-table跨行显示(非脚手架),本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
浅谈Vue.js组件(二)
这篇文章主要介绍了Vue.js组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
使用ElementUI写一个前端分页查询的实例
本文主要介绍了使用ElementUI写一个前端分页查询的实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
vue如何使用html2canvas和JsPDF导出pdf组件
这篇文章主要介绍了vue如何使用html2canvas和JsPDF导出pdf组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-09-09
vue实现列表无缝滚动效果
这篇文章主要为大家详细介绍了vue实现列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04