Merge pull request '配置路由' (#3) from Brunch_LPQ into main

order-system/package-lock.json

@@ -8,9 +8,11 @@
       "name": "order-system",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.5.17"
+        "vue": "^3.5.17",
+        "vue-router": "^4.5.1"
       },
       "devDependencies": {
+        "@types/node": "^24.2.1",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vue/tsconfig": "^0.7.0",
         "typescript": "~5.8.3",
@@ -806,6 +808,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.2.1",
+      "resolved": "https://registry.npmmirror.com/@types/node/-/node-24.2.1.tgz",
+      "integrity": "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.10.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
@@ -913,6 +925,12 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/language-core": {
       "version": "2.2.12",
       "resolved": "https://registry.npmmirror.com/@vue/language-core/-/language-core-2.2.12.tgz",
@@ -1328,6 +1346,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-7.10.0.tgz",
+      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.0.6",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-7.0.6.tgz",
@@ -1431,6 +1456,21 @@
         }
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.2.12",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-2.2.12.tgz",

order-system/package.json

@@ -9,9 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.17"
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
+    "@types/node": "^24.2.1",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/tsconfig": "^0.7.0",
     "typescript": "~5.8.3",

order-system/src/App.vue

@@ -1,30 +1,7 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
+<!-- 作为应用程序的根组件，并提供路由视图的容器 -->
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <router-view/>
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<style lang="scss">
+</style>

order-system/src/components/HelloWorld.vue

@@ -1,37 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-defineProps<{ msg: string }>()
 
-const count = ref(0)
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
+  <h1>测试路由搭载是否成功，不需要msg</h1>
 
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 
 <style scoped>

order-system/src/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["vite/client"]
+  },
+  "exclude": ["node_modules", "dist"]
+}

order-system/src/main.ts

@@ -1,5 +1,11 @@
 import { createApp } from 'vue'
-import './style.css'
+// import './style.css'    将默认样式注释掉，避免影响后续开发
+
+import router from './router'   //将创建好的路由引入到main.ts中
 import App from './App.vue'
 
-createApp(App).mount('#app')
+// createApp(App).mount('#app')
+
+// 通过router创建,挂载路由
+const app = createApp(App);
+app.use(router).mount('#app')

order-system/src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import Layout from '@/components/HelloWorld.vue'
+// console.log('组件路径:', HelloWorld.__file)
+
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/home',
+    name: 'Home',
+    component: Layout
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

order-system/src/vite-env.d.ts

@@ -1 +1,16 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-vue/client" />
+
+// 声明 Vue 文件模块
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+// 声明路径别名（可选，增强类型提示）
+declare module '@/components/*' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

order-system/tsconfig.app.json

@@ -2,14 +2,27 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
-    /* Linting */
+    // 添加以下路径配置
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    // 添加必要的库支持
+    "lib": ["ESNext", "DOM"],
+    // 添加模块解析配置
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    // 确保包含以下选项
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "jsx": "preserve"
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
-}
+  "include": [
+    "src/**/*.ts", 
+    "src/**/*.tsx", 
+    "src/**/*.vue",
+    "vite-env.d.ts"  // 确保包含类型声明文件
+  ]
+}

order-system/vite.config.ts

@@ -1,7 +1,32 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-
+import path from 'path'  //导入nodejs核心模块path，解构提取resolce方法
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  server:{
+    host: '0.0.0.0',//解决控制台：Network:use--host to expose
+    port: 8080,//配置端口号
+    hmr:true,//开启热更新
+    open:true//启动在浏览器打开
+  },
+  // resolve: {
+  //   //为项目设置别名，简化项目路径
+  //   alias: [
+  //     {
+  //       find: '@',
+  //       replacement: resolve(__dirname, 'src')
+  //     }
+  //   ]
+  // }
+  resolve: {
+    // 修正为对象格式
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      // 可以添加更多别名
+      'components': path.resolve(__dirname, 'src/components')
+    },
+    // 添加扩展名支持
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+  }
 })