refactor: 使用 defineOptions 特性

.vscode/vue3.3.code-snippets

@@ -0,0 +1,21 @@
+{
+  "Vue3.3+defineOptions快速生成模板": {
+    "scope": "vue",
+    "prefix": ["<", "Vue3.3+"],
+    "body": [
+      "<script setup lang='ts'>",
+      "defineOptions({",
+      "\tname: '$1'",
+      "})",
+      "</script>\n",
+      "<template>",
+      "\t<div>",
+      "\t\t$2",
+      "\t</div>",
+      "</template>\n",
+      "<style lang='scss' scoped>\n",
+      "</style>",
+    ],
+    "description": "Vue3.3+defineOptions快速生成模板"
+  }
+}

README.md

@@ -213,8 +213,11 @@ const routes: Array<RouteRecordRaw> = [
 
 ```vue
 <!-- src/views/about/index.vue -->
-<script setup lang="ts" name="About">
-	// 使用了 `vite-plugin-vue-setup-extend` 插件，可在 `setup` 语法糖标签上添加 `name` 属性为组件命名
+<script setup lang="ts">
+// Vue3.3+ defineOptions 宏
+defineOptions({
+  name: "About"
+});
 </script>
 
 <template>

package.json

@@ -75,7 +75,6 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-mock-dev-server": "^1.5.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.0.19"
   },

src/components/IIcon/index.vue

@@ -1,7 +1,11 @@
-<script setup lang="ts" name="IIcon">
+<script setup lang="ts">
 import { Icon as IconifyIconComp } from "@iconify/vue";
 import type { IconifyIcon } from "@iconify/vue";
 
+defineOptions({
+  name: "IIcon"
+});
+
 const props = defineProps<{
   icon: string | IconifyIcon;
 }>();

src/views/about/index.vue

@@ -1,4 +1,8 @@
-<script setup lang="ts" name="About"></script>
+<script setup lang="ts">
+defineOptions({
+  name: "About"
+});
+</script>
 
 <template>
   <div>about</div>

src/views/demo/index.vue

@@ -1,6 +1,10 @@
-<script setup lang="ts" name="Demo">
+<script setup lang="ts">
 import { reactive } from "vue";
 
+defineOptions({
+  name: "Demo"
+});
+
 const contentList = reactive([
   "✔ ⚡ Vue3 + Vite5",
   "✔ 🍕 TypeScript",

src/views/tools/index.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts" name="Tools">
+<script setup lang="ts">
 import { getListApi, getListApiError } from "@/api/mock";
 import { reactive } from "vue";
 import { showFailToast, showSuccessToast } from "vant";
@@ -10,6 +10,10 @@ import Fa6SolidBasketball from "@iconify-icons/fa6-solid/basketball";
 import Fa6SolidBurger from "@iconify-icons/fa6-solid/burger";
 import Fa6SolidChessKnight from "@iconify-icons/fa6-solid/chess-knight";
 
+defineOptions({
+  name: "Tools"
+});
+
 const showList: string[] = reactive([]);
 
 const handleSuccessReq = async () => {

vite.config.ts

@@ -7,7 +7,6 @@ import { VantResolver } from "unplugin-vue-components/resolvers";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 import path from "path";
 import mockDevServerPlugin from "vite-plugin-mock-dev-server";
-import vueSetupExtend from "vite-plugin-vue-setup-extend";
 import viteCompression from "vite-plugin-compression";
 import { createHtmlPlugin } from "vite-plugin-html";
 import { enableCDN } from "./build/cdn";
@@ -37,8 +36,6 @@ export default defineConfig(({ mode }) => {
         // 指定 symbolId 格式
         symbolId: "icon-[dir]-[name]"
       }),
-      // 允许 setup 语法糖上添加组件名属性
-      vueSetupExtend(),
       // 生产环境 gzip 压缩资源
       viteCompression(),
       // 注入模板数据