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.js轮播图组件使用方法详解
这篇文章主要为大家详细介绍了vue.js轮播图组件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
Vue3的组合式API中使用ref()函数的例子
你们是否听说过Vue3的组合式API？它可是Vue3的新玩法，把以前的Vue2组件函数转化为了函数组件。好了，今天我要和大家分享的是如何在组合式API中使用ref()函数，感兴趣的朋友跟随小编一起看看吧
2023-06-06
去除Element-Plus下拉菜单边框的实现步骤
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的组件库,在使用 Element-Plus 进行开发时,我们可能会遇到需要自定义组件样式的情况,本文将介绍如何使用 CSS 来去除 Element-Plus 下拉框的边框,需要的朋友可以参考下
2024-03-03
vue2.0多条件搜索组件使用详解
这篇文章主要为大家详细介绍了vue2.0多条件搜索组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
vue3+vite+ts使用monaco-editor编辑器的简单步骤
因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器,下面这篇文章主要给大家介绍了关于vue3+vite+ts使用monaco-editor编辑器的简单步骤,需要的朋友可以参考下
2023-01-01
element plus中el-upload实现上传多张图片的示例代码
最近写项目的时候需要一次上传多张图片,本文主要介绍了element plus中el-upload实现上传多张图片的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
vue父元素点击事件与子元素点击事件冲突问题
这篇文章主要介绍了vue父元素点击事件与子元素点击事件冲突问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue表单类的父子组件数据传递示例
本篇文章主要介绍了Vue表单类的父子组件数据传递示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue获取图片MD5的方法详解
计算图片的MD5可以将其作为图片的唯一标识,从而优化对图片的存储和检索效率,本文主要介绍了Vue获取图片MD5的常用方法,感兴趣的可以了解下
2024-12-12
详细介绍解决vue和jsp结合的方法
这篇文章主要介绍了详细介绍解决vue和jsp结合的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02