大更新：依赖更新，单测工具修改，jsx插件切换，ts配置修改

.eslintrc.cjs

@@ -0,0 +1,14 @@
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  env: {
+    "vue/setup-compiler-macros": true,
+  },
+}

package.json

@@ -5,52 +5,47 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
-    "test": "jest"
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "test": "vitest --environment jsdom"
   },
   "dependencies": {
-    "axios": "^0.24.0",
+    "axios": "^0.26.1",
     "crypto-js": "^4.1.1",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.10.8",
     "mockjs": "^1.1.0",
     "pinia": "^2.0.11",
     "vue": "^3.2.31",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.13"
   },
   "devDependencies": {
-    "@types/crypto-js": "^4.0.2",
-    "@types/jest": "^27.0.3",
-    "@types/mockjs": "^1.0.4",
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@types/crypto-js": "^4.1.1",
+    "@types/jsdom": "^16.2.14",
+    "@types/mockjs": "^1.0.6",
     "@types/node": "^16.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
     "@vicons/antd": "^0.11.0",
     "@vicons/ionicons5": "^0.11.0",
     "@vitejs/plugin-vue": "^1.10.1",
-    "@vue/babel-plugin-jsx": "^1.1.0",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-unit-jest": "^4.5.15",
+    "@vitejs/plugin-vue-jsx": "^1.3.7",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.17",
-    "@vue/vue3-jest": "^27.0.0-alpha.3",
-    "babel-jest": "^27.3.1",
-    "eslint": "^8.3.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.1.1",
-    "jest": "^27.5.1",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "jsdom": "^19.0.0",
     "less": "^4.1.2",
-    "less-loader": "^10.2.0",
-    "naive-ui": "^2.25.2",
-    "prettier": "^2.4.1",
-    "ts-jest": "^27.0.7",
+    "naive-ui": "^2.26.3",
+    "prettier": "^2.5.1",
     "typescript": "^4.5.5",
     "vite": "^2.8.4",
-    "vite-plugin-eslint": "^1.3.0",
-    "vite-plugin-html": "^3.0.6",
+    "vite-plugin-html": "^3.1.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vite-plugin-windicss": "^1.7.1",
+    "vite-plugin-windicss": "^1.8.3",
+    "vitest": "^0.6.0",
     "vue-tsc": "^0.31.4",
-    "windicss": "^3.4.4"
+    "windicss": "^3.5.1"
   }
 }

src/layouts/components/content.vue

@@ -8,7 +8,7 @@
   </router-view>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useRouteStore } from '@/store/modules/route'
 import { useSettingStore } from '@/store/modules/setting'
 import { computed } from 'vue'

src/plugins/icons.ts

@@ -2,11 +2,14 @@
  * 挂载所有icons
  */
 import * as icons from '@/components/common/Icons'
+import type { App } from 'vue'
+
+type IconsName = keyof typeof icons
 
 export default {
-  install: Vue => {
+  install: (Vue: App) => {
     Object.keys(icons).forEach(key => {
-      Vue.component(key, icons[key])
+      Vue.component(key, icons[key as IconsName])
     })
   },
 }

src/router/guard.ts

@@ -1,6 +1,7 @@
 import { useRouteStoreOutOfSetup } from '@/store/modules/route'
 import { storage } from '@/utils/storage'
-import { isNavigationFailure, Router } from 'vue-router'
+import { isNavigationFailure } from 'vue-router'
+import type { Router } from 'vue-router' 
 
 export function createGuard(router: Router) {
   router.beforeEach(async (_to, _from, next) => {

src/router/index.ts

@@ -1,5 +1,6 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import type { App } from 'vue'
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import { createGuard } from './guard'
 
 // 从modules目录动态导入路由

src/router/modules/constant.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
 import layout from '@/layouts/index.vue'
 

src/router/modules/example.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 import { renderIcon, renderSvgIcon } from '@/utils'
 import layout from '@/layouts/index.vue'
 import {
@@ -20,7 +20,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: '',
         name: 'home-index',
-        component: () => import('@/views/example/homePage.vue'),
+        component: () => import('@/views/example/HomePage.vue'),
         meta: {
           title: '首页',
         },

src/store/modules/route.ts

@@ -14,7 +14,7 @@ export const useRouteStore = defineStore({
     routes: constantRoute,
   }),
   actions: {
-    setKeepAliveComponents(compNames) {
+    setKeepAliveComponents(compNames: string[]) {
       // 设置需要缓存的组件
       this.keepAliveComponents = compNames
     },

src/utils/index.ts

@@ -1,13 +1,14 @@
 import { h } from 'vue'
 import { NIcon } from 'naive-ui'
 import SvgIcon from '@/components/common/Icons/SvgIcon.vue'
+
 /**
  * render 图标
  * */
-export function renderIcon(icon) {
+export function renderIcon(icon: XiconsComponent) {
   return () => h(NIcon, null, { default: () => h(icon) })
 }
 
-export function renderSvgIcon(svgName) {
+export function renderSvgIcon(svgName: string) {
   return () => h(NIcon, null, { default: () => h(SvgIcon, { name: svgName }) })
 }

src/utils/router.ts

@@ -1,7 +1,9 @@
+import type { RouteRecord } from "vue-router"
+
 /**
  * 判断根路由 Router
  * */
-export function isRootRouter(item) {
+export function isRootRouter(item: RouteRecord) {
   return item.meta?.isRoot === true && item.children?.length === 1
 }
 

tests/unit/HelloWorld.spec.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+import HelloWorldTsx from '@/components/HelloWorld.tsx'
+
+describe('HelloWorld', () => {
+  it('renders sfc properly', () => {
+    const wrapper = mount(HelloWorld, {
+      props: { msg: 'Hello Vitest' },
+    })
+    expect(wrapper.text()).toMatch('Hello Vitest')
+  })
+  it('renders tsx properly', () => {
+    const wrapper = mount(HelloWorldTsx, {
+      props: { msg: 'Hello Vitest' },
+    })
+    expect(wrapper.text()).toMatch('Hello Vitest')
+  })
+})

tests/unit/storage.spec.ts

@@ -1,4 +1,5 @@
 import { storage } from '@/utils/storage/index'
+import {beforeEach, afterEach, describe, it, expect} from 'vitest'
 
 beforeEach(() => {
   localStorage.clear()

tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.web.json",
+    "include": ["env.d.ts", "types/*", "src/**/*", "src/**/*.vue"],
+    "exclude": ["src/**/__tests__/*", "tests/unit/*"],
+    "compilerOptions": {
+      "composite": true,
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["./src/*"]
+      }
+    }
+  }
+

tsconfig.json

@@ -1,41 +1,14 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
-    "strictFunctionTypes": false,
-    "jsx": "preserve",
-    "baseUrl": ".",
-    "allowJs": true,
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "experimentalDecorators": true,
-    "lib": ["dom", "esnext"],
-    "types": ["vite/client", "jest", "vite-plugin-svg-icons/client"],
-    "typeRoots": ["./node_modules/@types/", "./types"],
-    "noImplicitAny": false,
-    "skipLibCheck": true,
-    "paths": {
-      "@/*": ["src/*"],
-      "/#/*": ["types/*"]
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.vite-config.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
     }
-  },
-  "include": [
-    "tests/**/*.ts",
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "types/**/*.d.ts",
-    "types/**/*.ts",
-    "mock/**/*.ts",
-    "vite.config.ts"
-  ],
-  "exclude": ["node_modules", "dist", "**/*.js"]
+  ]
 }