移动端适配、vant

.d.ts

@@ -0,0 +1,3 @@
+// amfe-flexible.d.ts
+
+declare module 'amfe-flexible'

auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
 

components.d.ts

@@ -11,15 +11,7 @@ declare module 'vue' {
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElMain: typeof import('element-plus/es')['ElMain']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
   }
 }

package.json

@@ -18,18 +18,22 @@
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "sass": "^1.77.8",
+    "vant": "^4.9.17",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
+    "@types/postcss-pxtorem": "^6.1.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/tsconfig": "^0.5.1",
     "@yl/yili-fe-lint-config": "^1.0.0",
+    "amfe-flexible": "^2.2.1",
     "husky": "^9.1.5",
     "npm-run-all2": "^6.2.0",
+    "postcss-pxtorem": "^6.1.0",
     "typescript": "~5.4.0",
     "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.3",

src/main.ts

@@ -1,5 +1,6 @@
 import './assets/main.css';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+import 'amfe-flexible'
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';

tsconfig.app.json

@@ -1,11 +1,18 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "./auto-imports.d.ts",
+    "./components.d.ts",
+    "./amfe-flexible.d.ts"
+  ],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
+    "allowJs": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]

vite.config.ts

@@ -10,6 +10,14 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 // https://vitejs.dev/config/
 export default defineConfig({
   css: {
+    postcss:{
+      plugins:[
+        // postCssPxToRem({
+        //   rootValue:37.5,
+        //   propList:['*'],
+        // })
+      ]
+    },
     preprocessorOptions: {
       scss: {}
     }