快捷導(dǎo)航

Vue3項(xiàng)目中給組件命名的方式詳解

更新時間：2026年04月15日 08:43:30 作者：賬號已注銷free

這篇文章主要介紹了兩種在Vue3項(xiàng)目中給組件命名的方法：原生的export default方式和使用vite-plugin-vue-setup-extend插件的方式,通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 不使用插件，通過 export default 設(shè)置組件名

<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 屬性來設(shè)置組件名。
缺點(diǎn)是需要在 <script> 中額外寫一個對象，略顯冗余，且與 <script setup> 并用時存在兩個 script 標(biāo)簽。

2. 推薦方式：使用 vite-plugin-vue-setup-extend 插件（支持在 <script setup> 中直接寫 name）

<template>
  <div></div>
</template>
<script lang="ts" setup name="CustomComponentName">
// 組合式 API 邏輯
</script>
<style scoped></style>

優(yōu)點(diǎn)：

語法簡潔，組件名與邏輯寫在一起。
避免額外的 export default 塊，更適合 <script setup> 風(fēng)格。

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()  // 啟用組件名擴(kuò)展
  ],
  // 其他配置...
})

（3）可選：TypeScript 支持

如果在 TypeScript 環(huán)境中希望獲得 name 屬性的類型提示，可在 env.d.ts 或 shims-vue.d.ts 中添加：

declare module "*.vue" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

該插件不強(qiáng)制要求類型聲明，但添加后可提升開發(fā)體驗(yàn)。

總結(jié)

方式	優(yōu)點(diǎn)	缺點(diǎn)
原生 `export default`	無需插件，通用性強(qiáng)	代碼冗余，與 `<script setup>` 配合不夠優(yōu)雅
`vite-plugin-vue-setup-extend`	簡潔、現(xiàn)代化，適合 `<script setup>` 風(fēng)格	需要額外安裝插件及配置