fix

frontend/package.json

@@ -15,7 +15,8 @@
     "path": "^0.12.7",
     "process": "^0.11.10",
     "terser": "^5.19.2",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

frontend/src/App.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { ElButton } from 'element-plus'
 import axios from 'axios'
+import Test from '@/components/Test'
 
 const count = ref(0)
 
@@ -31,7 +32,7 @@ const get_msg = () => {
 {{ count }}
 
 <br>
-
+<test></test>
 <el-button @click="get_msg">get data</el-button>
 {{ msg }}
 </template>

frontend/src/components/Test.vue

+<script setup lang="ts">
+import { ref } from 'vue';
+
+
+const test = ref('test')
+
+</script>
+
+
+<template>
+
+<h1> {{ test }} </h1>
+
+<br>
+
+</template>
\ No newline at end of file

frontend/src/main.ts

@@ -4,7 +4,10 @@ import App from './App.vue'
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import router from './router'
+
 
 const app = createApp(App)
+app.use(router)
 app.use(ElementPlus)
 app.mount('#app')

frontend/src/router/index.ts

+import { createRouter, createWebHistory } from 'vue-router';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    // 定义路由...
+  ]
+});
+
+export default router;

frontend/tsconfig.json

@@ -22,7 +22,13 @@
 
     "types": [
       "element-plus/global.d.ts",
-    ]
+    ],
+    //解析非相对模块的基础地址，默认是当前目录
+ 		"baseUrl": "./",
+ 		//路径映射，相对于baseUrl
+ 		"paths": {
+ 			"@/*": ["./src/*.vue"]
+ 		},
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

frontend/vite.config.ts

@@ -13,7 +13,8 @@ export default defineConfig({
   resolve: {
     alias: {
       "@": pathResolve('src')
-    }
+    },
+    extensions: ['.ts', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己 增减
   },
   plugins: [
     legacy({

frontend/yarn.lock

@@ -1231,6 +1231,11 @@
     "@vue/compiler-dom" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/language-core@1.8.8":
   version "1.8.8"
   resolved "https://registry.npmmirror.com/@vue/language-core/-/language-core-1.8.8.tgz#5a8aa8363f4dfacdfcd7808a9926744d7c310ae6"
@@ -1956,6 +1961,13 @@ vue-demi@*:
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
   integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
 
+vue-router@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.4.tgz#382467a7e2923e6a85f015d081e1508052c191b9"
+  integrity sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+
 vue-template-compiler@^2.7.14:
   version "2.7.14"
   resolved "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"