From 56ae7606168195536e3ae1972ab2fdbb4038f2ad Mon Sep 17 00:00:00 2001
From: xiangshu233 <xiangshu233@outlook.com>
Date: Thu, 28 Dec 2023 23:23:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(view):=20:sparkles:=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20vue=203.3=20defineOptions=20=E5=AE=8F=E5=A3=B0=E6=98=8E?=
 =?UTF-8?q?=E5=8D=95=E6=96=87=E4=BB=B6=20name=20=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=EF=BC=8C=E7=A7=BB=E9=99=A4=20vite-plugin-vue-setup-extend=20?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                  | 1 -
 src/layout/index.vue          | 5 ++---
 src/views/dashboard/index.vue | 6 +++++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e147876..ef76c67 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,6 @@
     "vite-plugin-html": "^3.2.1",
     "vite-plugin-mock": "^2.9.8",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vite-plugin-windicss": "^1.9.3",
     "vue-eslint-parser": "^9.3.2",
     "vue-tsc": "^1.8.27"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ee3e06f..0738117 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -7,9 +7,8 @@
           keep-alive 标签的 include 属性是根据组件的 name 判断的，
           所以 index.vue 和 list.vue 等页面 vue 文件里一定要写上 name，
           并且与 router 路由表中使用的 name 属性 一致，否则无效
-          本项目使用了 vite-plugin-vue-setup-extend 插件
-          可直接在 script 标签上书写 name 如：
-          <script setup lang="ts" name="DashboardPage">
+          Vue 3.3 中新引入了 defineOptions 宏声明 name 属性
+          https://gist.github.com/sxzz/3995fc7251567c7c95de35f45539b9c2
         -->
         <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
           <component :is="Component" :key="route.fullPath" />
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3d7c9e4..769df5b 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -21,12 +21,16 @@
   </div>
 </template>
 
-<script setup lang="ts" name="DashboardPage">
+<script setup lang="ts">
   import { computed } from 'vue';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
   import SvgIcon from '@/components/SvgIcon.vue';
   import { useGlobSetting } from '@/hooks/setting';
 
+  defineOptions({
+    name: 'DashboardPage',
+  });
+
   const designStore = useDesignSettingStore();
   const globSetting = useGlobSetting();