feat: migration to compositionAPI

src/components/card/index.vue

@@ -27,12 +27,18 @@ import { defineComponent, PropType, computed } from 'vue';
 export default defineComponent({
   name: 'Card',
   props: {
-    title: String as PropType<string>,
+    title: {
+      type: String as PropType<string>,
+      default: '',
+    },
     compact: {
       type: Boolean as PropType<boolean>,
       default: false,
     },
-    describe: String as PropType<string>,
+    describe: {
+      type: String as PropType<string>,
+      default: '',
+    },
     size: {
       type: String as PropType<string>,
       default: 'default',
@@ -86,9 +92,6 @@ export default defineComponent({
     display: flex;
     align-items: center;
     justify-content: center;
-    // position: absolute;
-    // top: 30px;
-    // right: 32px;
   }
 
   &-container {

src/components/color.vue

@@ -5,14 +5,14 @@
   />
 </template>
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { getBrandColor } from '@/config/color';
 
 export default defineComponent({
   name: 'Color',
   props: {
     value: {
-      type: String,
+      type: String as PropType<string>,
       default: 'default',
     },
   },
@@ -23,7 +23,10 @@ export default defineComponent({
         backgroundColor: getBrandColor(value)['@brand-color'],
       };
     });
-    return { style };
+
+    return {
+      style,
+    };
   },
 });
 </script>

src/components/thumbnail/index.vue

@@ -5,17 +5,17 @@
   >
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, PropType } from 'vue';
 
 export default defineComponent({
   name: 'Thumbnail',
   props: {
     url: {
-      type: String,
+      type: String as PropType<string>,
       default: '',
     },
     type: {
-      type: String,
+      type: String as PropType<string>,
       default: 'layout',
     },
   },

src/components/trend/index.vue

@@ -57,7 +57,10 @@ export default defineComponent({
       type: [String, Number] as PropType<string | number>,
       default: '',
     },
-    isReverseColor: Boolean as PropType<boolean>,
+    isReverseColor: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
   setup(props) {
     const containerCls = computed(() => {

src/store/index.ts

@@ -3,13 +3,8 @@ import { createStore, Store } from 'vuex';
 import user from './modules/user';
 import notification from './modules/notification';
 import setting from './modules/setting';
-export interface State {
-  count: number
-}
 
-export const key: InjectionKey<Store<State>> = Symbol();
+export const store = createStore({
-
-export const store = createStore<State>({
   modules: {
     user,
     setting,

vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import { viteMockServe } from 'vite-plugin-mock';
 import { viteThemePlugin } from 'vite-plugin-theme';
 import createVuePlugin from '@vitejs/plugin-vue';
-import createSvgPlugin from 'vite-plugin-vue-svg';
+import svgLoader from 'vite-svg-loader'
 import vueJsx from '@vitejs/plugin-vue-jsx';
 
 // import HttpProxyAgent from 'http-proxy-agent';
@@ -44,7 +44,7 @@ export default defineConfig({
     viteThemePlugin({
       colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
     }),
-    createSvgPlugin(),
+    svgLoader()
   ],
 
   server: {