112

package.json

@@ -17,6 +17,7 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@types/three": "^0.139.0",
     "@vitejs/plugin-vue": "^2.3.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.0",

src/env.d.ts

 /// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

src/router/index.ts

@@ -3,7 +3,7 @@ import {
 } from 'vue-router';
 
 // 静态路由
-export const constantRouterMap: Array<RouteRecordRaw> = [
+export const constantRoutes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'helloWorld',
@@ -21,7 +21,7 @@ const router = createRouter({
   scrollBehavior: () => ({ // 切换路由, 始终滚动到顶部
     top: 0
   }),
-  routes: constantRouterMap
+  routes: constantRoutes
 });
 
 export default router;

src/shims-vue.d.ts

+/**
+* shims-vue.d.ts的作用
+* 为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，
+* 加这一段是是告诉 ts，vue 文件是这种类型的。
+* 可以把这一段删除，会发现 import 的所有 vue 类型的文件都会报错。
+*/
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "@types/three";