feat: 增加@vueuse/core简化部分操作,增加全局接口定义

package.json

@@ -26,6 +26,7 @@
     ]
   },
   "dependencies": {
+    "@vueuse/core": "^7.3.0",
     "axios": "^0.24.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.6",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ specifiers:
   '@typescript-eslint/parser': ^5.7.0
   '@vitejs/plugin-vue': ^2.0.0
   '@vue/eslint-config-typescript': ^9.1.0
+  '@vueuse/core': ^7.3.0
   axios: ^0.24.0
   commitizen: ^4.2.4
   cz-conventional-changelog: ^3.3.0
@@ -24,6 +25,7 @@ specifiers:
   vue-tsc: ^0.29.8
 
 dependencies:
+  '@vueuse/core': 7.3.0_vue@3.2.26
   axios: 0.24.0
   nprogress: 0.2.0
   pinia: 2.0.6_typescript@4.5.4+vue@3.2.26
@@ -507,6 +509,37 @@ packages:
   /@vue/shared/3.2.26:
     resolution: {integrity: sha512-vPV6Cq+NIWbH5pZu+V+2QHE9y1qfuTq49uNWw4f7FDEeZaDU2H2cx5jcUZOAKW7qTrUS4k6qZPbMy1x4N96nbA==, tarball: '@vue/shared/download/@vue/shared-3.2.26.tgz'}
 
+  /@vueuse/core/7.3.0_vue@3.2.26:
+    resolution: {integrity: sha512-gPJyMMAquva9Qwqz63qGQT122m5hWI8Kuy8kfPV/JLQU7m01CXooyv8FIrX9TV8OxVcHBTPXPJHY0oyUiFoNgw==, tarball: '@vueuse/core/download/@vueuse/core-7.3.0.tgz'}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@vueuse/shared': 7.3.0_vue@3.2.26
+      vue: 3.2.26
+      vue-demi: 0.12.1_vue@3.2.26
+    dev: false
+
+  /@vueuse/shared/7.3.0_vue@3.2.26:
+    resolution: {integrity: sha512-vOAeI84tIXKVkzm8s/Mxbrzhj0QN6NyVc/sC6LrW0AjVNdvpD8sB1dZiDn9yh8T77WJmloCEt4zZVIppeq7I+w==, tarball: '@vueuse/shared/download/@vueuse/shared-7.3.0.tgz'}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue: 3.2.26
+      vue-demi: 0.12.1_vue@3.2.26
+    dev: false
+
   /acorn-jsx/5.3.2_acorn@8.6.0:
     resolution: {integrity: sha1-ftW7VZCLOy8bxVxq8WU7rafweTc=, tarball: acorn-jsx/download/acorn-jsx-5.3.2.tgz}
     peerDependencies:

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+  import { RouterView } from 'vue-router';
 </script>
 
 <template>

src/layouts/app/Header.vue

@@ -12,6 +12,8 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { RouterLink} from 'vue-router';
+
 const navs = ref([
   {
     path: '/',

src/layouts/app/index.vue

@@ -2,7 +2,7 @@
   <AppHeader />
   <RouterView />
 </template>
-<script setup>
+<script lang="ts" setup>
+import { RouterView } from 'vue-router';
 import AppHeader from './Header.vue';
 </script>
-

src/layouts/default/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <RouterView />
+</template>
+<script lang="ts" setup>
+  import { RouterView } from 'vue-router'
+
+</script>

src/pages/Home/index.vue

@@ -1,11 +1,32 @@
 <template>
   <div class="home">
     home page
+    <p>{{ str }}</p>
+    <button @click="copyHandle">
+      复制
+    </button>
   </div>
 </template>
-<script setup>
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useClipboard } from '@vueuse/core';
 import { AppStore } from '@/store/modules/app';
-console.log(11)
+
+const str = ref('这是一段可以点击按钮复制的文字')
+const { text, copy, copied, isSupported } = useClipboard({ source: str })
+const copyHandle = () => {
+  if (!isSupported) {
+    alert('不支持复制')
+    return
+  }
+  copy()
+}
+watch(copied, (v) => {
+  if (v) {
+    alert(`复制成功，内容为：${text.value}`)
+  }
+})
+
 const store = AppStore()
 store.updateLoading(true)
 console.log('store >>>', store.isLoading)

src/service/index.ts

@@ -4,11 +4,4 @@ enum Url {
   getUserInfo = '/api/getUserInfo'
 }
 
-interface getUserInfo {
-  name: string
-  age: number
-  job: string
-  auth: string[]
-}
-
-export const getUserInfo = () => http.get<getUserInfo>(Url.getUserInfo)
+export const getUserInfo = () => http.get<InterFaceUserInfo>(Url.getUserInfo)

src/types/index.d.ts

@@ -0,0 +1,6 @@
+declare interface InterFaceUserInfo {
+  name: string
+  age: number
+  job: string
+  auth: string[]
+}