feature: setup 使用 options

build/vite/plugin/index.ts

@@ -16,6 +16,9 @@ import { configMockPlugin } from './mock';
 import { configPwaPlugin } from './pwa';
 // 按需element样式
 import ElementPlus from 'unplugin-element-plus/vite';
+// setip使用Options API
+import DefineOptions from 'unplugin-vue-define-options/vite';
+
 // eslint
 // import { configEsLinterPlugin } from './eslinter'
 
@@ -38,6 +41,8 @@ export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
 
   vitePlugins.push(configPwaPlugin());
 
+  vitePlugins.push(DefineOptions());
+
   /* 会重复引入与组件数量相等的主题变量 */
   vitePlugins.push(
     ElementPlus({

package.json

@@ -93,6 +93,7 @@
     "stylelint-scss": "^4.2.0",
     "typescript": "^4.7.4",
     "unplugin-element-plus": "^0.4.1",
+    "unplugin-vue-define-options": "^0.6.1",
     "vite": "^2.9.13",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-linter": "^1.2.0",

src/components/SeamlessScroll/index.vue

@@ -24,17 +24,17 @@
   </div>
 </template>
 
-<script lang="ts">
-  // VueSeamlessScroll 插件本身不支持vue3写法，只能把源码拷贝下来自己手动转
-  export default { name: 'SeamlessScroll' };
-</script>
-
 <script setup lang="ts">
   import { computed, ref, unref, nextTick, Ref } from 'vue';
   import type { CSSProperties } from 'vue';
   import { tryOnMounted, tryOnUnmounted, templateRef, useDebounceFn } from '@vueuse/core';
   import * as utilsMethods from './utils';
   const { animationFrame, copyObj } = utilsMethods;
+
+  defineOptions({
+    name: 'SeamlessScroll',
+  });
+
   animationFrame();
 
   const props = defineProps({

src/router/modules/components/index.ts

@@ -13,7 +13,7 @@ const component: AppRouteRecordRaw[] = [
         path: '/components/form',
         name: 'RtForm',
         component: () => import('@/views/components/form/index.vue'),
-        meta: { title: t('route.pathName.form') },
+        meta: { title: t('route.pathName.form'), keepAlive: true },
       },
       {
         path: 'table',

src/views/components/date/index.vue

@@ -13,17 +13,15 @@
   </div>
 </template>
 
-<script lang="tsx">
-  export default {
-    name: 'RtDate',
-  };
-</script>
-
 <script lang="tsx" setup>
   import { DateCell } from 'element-plus/lib/components/date-picker/src/date-picker.type';
   import { onMounted, ref } from 'vue';
   import calendar from '@/utils/date/calendar/index.js';
 
+  defineOptions({
+    name: 'RtDate',
+  });
+
   onMounted(() => {
     console.log('缓存');
   });

src/views/components/drag/index.vue

@@ -37,14 +37,15 @@
     </el-row>
   </div>
 </template>
-<script lang="ts">
-  export default {
-    name: 'RtDrag',
-  };
-</script>
+
 <script lang="ts" setup>
   import useSortable from '@/hooks/web/useSortable';
   import { ref } from 'vue';
+
+  defineOptions({
+    name: 'RtDrag',
+  });
+
   const list = ref<Array<string>>([]);
   for (let i = 0; i < 7; i++) {
     list.value.push(`第${i + 1}个`);

src/views/components/form/index.vue

@@ -16,17 +16,15 @@
   </div>
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'RtForm',
-  };
-</script>
-
 <script lang="ts" setup>
   import Form from '@/components/Form/index.vue';
   import { FormProps } from '@/components/Form/types/from';
   import { h, reactive, ref } from 'vue';
 
+  defineOptions({
+    name: 'RtForm',
+  });
+
   const form = ref<{
     textarea: number;
   }>({ textarea: 0 });

src/views/details-page/datails-info/index.vue

@@ -4,15 +4,15 @@
     <el-input v-model="value"></el-input>
   </div>
 </template>
-<script lang="ts">
-  export default {
-    name: 'RtDetailsInfo',
-  };
-</script>
+
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useRoute } from 'vue-router';
 
+  defineOptions({
+    name: 'RtDetailsInfo',
+  });
+
   const route = useRoute();
   const { query } = route;
 

src/views/index/components/WeDetails.vue

@@ -53,14 +53,13 @@
   </div>
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'WeDetails',
-  };
-</script>
-
 <script setup lang="ts">
   import { ref } from 'vue';
+
+  defineOptions({
+    name: 'WeDetails',
+  });
+
   const lists = ref([
     { type: '', label: '吃饭' },
     { type: 'success', label: '睡觉' },

src/views/index/index.vue

@@ -51,12 +51,6 @@
   </div>
 </template>
 
-<script lang="ts">
-  export default {
-    name: 'RtWelcome',
-  };
-</script>
-
 <script setup lang="ts">
   import SeamlessScroll from '@/components/SeamlessScroll/index.vue';
   import WeDetails from './components/WeDetails.vue';
@@ -65,6 +59,10 @@
 
   import { useECharts } from '@/hooks/web/useECharts';
 
+  defineOptions({
+    name: 'RtWelcome',
+  });
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 

tsconfig.json

@@ -24,7 +24,7 @@
     "noImplicitAny": true,
     "removeComments": true,
     "isolatedModules": true,
-    "types": ["vite/client", "element-plus/global"],
+    "types": ["vite/client", "element-plus/global", "unplugin-vue-define-options"],
     "typeRoots": ["./node_modules", "./types"],
     "lib": ["esnext", "dom"],
     "paths": {