vue+ts

frontEndMobile/package.json

@@ -26,7 +26,9 @@
   },
   "devDependencies": {
     "@types/node": "^22.9.0",
+    "@types/vue": "^2.0.0",
     "@vitejs/plugin-vue": "^5.1.5",
+    "@vue/compiler-sfc": "^3.5.12",
     "path": "^0.12.7",
     "typescript": "~5.6.2",
     "vite": "^5.4.10",

frontEndMobile/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
+import tabbar from '@/components/tabbar.vue'
 </script>
 
 <template>
@@ -11,7 +12,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
+  <HelloWorld msg="Vite + Vue" /><tabbar />
 </template>
 
 <style scoped>

frontEndMobile/src/components/tabbar.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>底部</div>
+</template>

frontEndMobile/src/main.ts

@@ -1,5 +1,20 @@
 import { createApp } from 'vue'
+// 1. 引入你需要的组件
+import vant from 'vant'
+// 2. 引入组件样式
+import 'vant/lib/index.css'
+
+import {setupRouter} from './router'
+
+import { setupStore } from './store'
+
 import './style.css'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+setupRouter(app);
+setupStore(app);
+app.use(vant)
+app.use(vant)
+app.mount('#app')

frontEndMobile/src/router/index.ts

@@ -0,0 +1,20 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import type { App } from 'vue'
+
+import routes from './routes/index'
+
+const router = createRouter({
+  // vueRouter@3版本的mode改成了history，hash模式配置createWebHashHistory，history模式配置createWebHistory
+  history: createWebHashHistory(),
+  routes
+})
+
+/**
+ * 路由初始化函数
+ * @param app
+ */
+export const setupRouter = (app: App) => {
+  app.use(router)
+}
+
+export default router

frontEndMobile/src/router/routes/modules/common.ts

@@ -0,0 +1,17 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+// 路由规则
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/home',
+    name: 'home',
+    component: () => import('@/views/HomePage.vue')
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/LoginPage.vue')
+  }
+]
+
+export default routes

frontEndMobile/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// shims-vue.d.ts
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontEndMobile/src/store/index.ts

@@ -0,0 +1,10 @@
+import { createPinia } from 'pinia'
+import type { App } from 'vue'
+
+const store = createPinia()
+
+export const setupStore = (app: App) => {
+  app.use(store)
+}
+
+export default store

frontEndMobile/src/views/common/HomePage.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>Home</div>
+</template>

frontEndMobile/src/views/common/LoginPage.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>login</div>
+</template>

frontEndMobile/src/vite-env.d.ts

@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+interface ImportMeta {
+    globEager: (pattern: string) => Record<string, any>;
+}

frontEndMobile/tsconfig.app.json

@@ -12,7 +12,6 @@
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
     "jsx": "preserve",
 
     /* Linting */
@@ -20,7 +19,9 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "composite": true,
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

frontEndMobile/tsconfig.json

@@ -4,18 +4,18 @@
     "useDefineForClassFields": true,
     "module": "esnext",
     "moduleResolution": "node",
-    "types": ["node"], // 添加 Node.js 类型
+    "types": ["node", "vite/client", "pinia"], // 添加 Node.js 类型
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
+    "lib": ["ESNext", "DOM"],
     "skipLibCheck": true,
     "baseUrl": "./",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["src/*"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

frontEndMobile/tsconfig.node.json

@@ -11,14 +11,15 @@
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
 
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "composite": true,
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "src/**/*"]
 }

frontEndMobile/yarn.lock

@@ -249,6 +249,13 @@
   dependencies:
     undici-types "~6.19.8"
 
+"@types/vue@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/@types/vue/-/vue-2.0.0.tgz#ec77b3d89591deb9ca5cb052368aa9c32be088e7"
+  integrity sha512-WDElkBv/o4lVwu6wYHB06AXs4Xo2fwDjJUpvPRc1QQdzkUSiGFjrYuSCy8raxLE5FObgKq8ND7R5gSZTFLK60w==
+  dependencies:
+    vue "*"
+
 "@vant/popperjs@^1.3.0":
   version "1.3.0"
   resolved "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz#e0eff017124b5b2352ef3b36a6df06277f4400f2"
@@ -304,7 +311,7 @@
     "@vue/compiler-core" "3.5.12"
     "@vue/shared" "3.5.12"
 
-"@vue/compiler-sfc@3.5.12":
+"@vue/compiler-sfc@3.5.12", "@vue/compiler-sfc@^3.5.12":
   version "3.5.12"
   resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz#6688120d905fcf22f7e44d3cb90f8dabc4dd3cc8"
   integrity sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==
@@ -629,7 +636,7 @@ vue-tsc@^2.1.8:
     "@vue/language-core" "2.1.10"
     semver "^7.5.4"
 
-vue@^3.5.12:
+vue@*, vue@^3.5.12:
   version "3.5.12"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.5.12.tgz#e08421c601b3617ea2c9ef0413afcc747130b36c"
   integrity sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==