feat(view): ✨ 使用 vue 3.3 defineOptions 宏声明单文件 name 属性，移除 vite-plugin-vue-setup-extend 插件

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"

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" />

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();