chore: Update environment configuration and dependencies

.env

@@ -0,0 +1,4 @@
+VITE_BUILD_TIME=
+VITE_BUILD_COMMIT=
+VITE_BASE=/
+VITE_SPLIT_CHUNKS=true

.env.development

@@ -0,0 +1,3 @@
+VITE_BUILD_TIME=DEV
+VITE_BUILD_COMMIT=DEV
+VITE_BASE=/

.gitignore

@@ -18,8 +18,8 @@ coverage
 /cypress/screenshots/
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+# .vscode/*
+# !.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "vue-router/auto$"
+  ]
+}

README.md

@@ -1,4 +1,4 @@
-# vue-ts
+# vue-ts
 
 This template should help get you started developing with Vue 3 in Vite.
 

auto-imports.d.ts

@@ -0,0 +1,83 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

components.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    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']
+  }
+}

env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

index.html

@@ -1,13 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<html lang="zh-CN" data-build-time="%VITE_BUILD_TIME%" data-commit="%VITE_BUILD_COMMIT%">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shotcut icon" href="logo@3x.png" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no" />
+  <meta name="format-detection" content="telephone=no">
+  <title>vue-ts-example</title>
+  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
+</head>
+
+<body ontouchstart ontouchend>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+  <script src="https://fastly.jsdelivr.net/npm/@vant/touch-emulator/dist/index.min.js"></script>
+  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/nprogress/nprogress.css">
+</body>
+
+</html>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "-vue-ts",
+  "name": "vue-ts",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -14,6 +14,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@types/nprogress": "^0.2.3",
+    "nprogress": "^0.2.0",
     "pinia": "^2.2.0",
     "vue": "^3.4.35",
     "vue-router": "^4.4.2"
@@ -23,6 +25,9 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.14",
+    "@unocss/preset-rem-to-px": "^0.61.9",
+    "@unocss/reset": "^0.61.9",
+    "@vant/auto-import-resolver": "^1.2.1",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
@@ -35,6 +40,10 @@
     "npm-run-all2": "^6.2.2",
     "prettier": "^3.3.3",
     "typescript": "~5.4.5",
+    "unocss": "^0.61.9",
+    "unplugin-auto-import": "^0.18.2",
+    "unplugin-vue-components": "^0.27.3",
+    "unplugin-vue-router": "^0.10.2",
     "vite": "^5.3.5",
     "vite-plugin-vue-devtools": "^7.3.7",
     "vitest": "^2.0.5",

src/App.vue

@@ -17,6 +17,10 @@ import HelloWorld from './components/HelloWorld.vue'
     </div>
   </header>
 
+  <nav>
+    <button @click="$router.push({ name: 'About' })">AboutButtonPush</button>
+  </nav>
+
   <RouterView />
 </template>
 

src/main.ts

@@ -1,4 +1,5 @@
 import './assets/main.css'
+import 'uno.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

src/router/index.ts

@@ -1,23 +1,29 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { routes, handleHotUpdate } from 'vue-router/auto-routes'
 
-const router = createRouter({
+
+export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
-    }
-  ]
+  // routes: [
+  //   {
+  //     path: '/',
+  //     name: 'home',
+  //     component: HomeView
+  //   },
+  //   {
+  //     path: '/about',
+  //     name: 'about',
+  //     // route level code-splitting
+  //     // this generates a separate chunk (About.[hash].js) for this route
+  //     // which is lazy-loaded when the route is visited.
+  //     component: () => import('../views/AboutView.vue')
+  //   }
+  // ],
+  routes,
 })
 
 export default router
+
+if (import.meta.hot) {
+  handleHotUpdate(router)
+} 

tsconfig.app.json

@@ -1,14 +1,25 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "include": [
+    "./typed-router.d.ts",
+    "./auto-imports.d.ts",
+    "./components.d.ts",
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
   "compilerOptions": {
     "composite": true,
+    "moduleResolution": "Bundler",
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   }
-}
+}

typed-router.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    'Root': RouteRecordInfo<'Root', '/', Record<never, never>, Record<never, never>>,
+    'About': RouteRecordInfo<'About', '/About', Record<never, never>, Record<never, never>>,
+  }
+}

vite.config.ts

@@ -1,20 +1,99 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
+import { VantResolver } from "@vant/auto-import-resolver"
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { fileURLToPath, URL } from 'node:url'
+import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { TDesignResolver } from "unplugin-vue-components/resolvers"
+import Components from 'unplugin-vue-components/vite'
+import { getPascalCaseRouteName, VueRouterAutoImports } from "unplugin-vue-router"
+import VueRouter from 'unplugin-vue-router/vite'
+import { defineConfig, loadEnv } from 'vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
-
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx(),
-    vueDevTools(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
+export default defineConfig(({ mode, command }) => {
+  const isBuild = command === "build";
+  const env = loadEnv(mode, process.cwd());
+
+  return {
+    base: env.VITE_BASE,
+    plugins: [
+      VueRouter({
+        exclude: ["**/__*", "**/__*/**/*"],
+        getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
+        logs: false,
+      }),
+      AutoImport({
+        imports: [
+          'vue-router',
+          VueRouterAutoImports,
+        ],
+      }),
+      // other plugins
+      AutoImport({
+        resolvers: [
+          TDesignResolver({
+            library: 'mobile-vue'
+          }),
+          VantResolver({
+            importStyle: true
+          }),
+        ],
+        imports: [
+          'pinia',
+          'vue',
+          VueRouterAutoImports,
+        ],
+      }),
+      Components({
+        resolvers: [
+          TDesignResolver({
+            library: 'mobile-vue'
+          }),
+          VantResolver({
+            importStyle: true
+          }),
+        ],
+      }),
+      UnoCSS(),
+      vue(),
+      vueJsx(),
+      vueDevTools(),
+    ],
+    define: {
+      $__DEV__: JSON.stringify(!isBuild),
+    },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    build: {
+      sourcemap: mode !== "production",
+      rollupOptions: {
+        output: {
+          // chunkFileNames: 'assets/chunk/[name]_[hash].js',
+          // entryFileNames: 'assets/entry/[name]_[hash].js',
+          // assetFileNames: 'assets/[ext]/[name]_[hash].[ext]',
+          manualChunks: (id, { getModuleIds, getModuleInfo }) => {
+            if (id.includes('node_modules') && env.VITE_SPLIT_CHUNKS === 'true') {
+              let pkgName = id;
+              pkgName = pkgName.split('.pnpm/')?.[1] || pkgName;
+              pkgName = pkgName.split('node_modules/')?.[1] || pkgName;
+              pkgName = pkgName.startsWith('@')
+                ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1]
+                : pkgName.split('/')[0];
+
+              if (
+                pkgName.startsWith('@vue/') ||
+                pkgName === 'vue-demi'
+              ) pkgName = 'vue'
+
+              return `libs/${pkgName}`;
+            }
+          },
+        }
+      }
+    },
   }
 })

vitest.config.ts

@@ -3,7 +3,7 @@ import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
 import viteConfig from './vite.config'
 
 export default mergeConfig(
-  viteConfig,
+  viteConfig({ command: 'build', mode: 'test' }),
   defineConfig({
     test: {
       environment: 'jsdom',