第一次做vue3+typescript，记录一下自己踩过的坑，没有提前熟悉就一股脑做可太难了
1.在main.ts里引入App.vue报错
Could not find a declaration file for module './App.vue'. '/Users/shouguachen/Desktop/extra/demo/src/App.vue.js' implicitly has an 'any' type
解决方法(shims-vue.d.ts)引入写在声明里：
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
2.莫名其妙的报错：
is not assignable to parameter of type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
Type 'typeof
解决方法,重启生效（App.vue）：
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "indexMaster",
data(){
return {}
}
})
</script>
3.ts自动识别不了后缀报错Cannot find module './App' or its corresponding type declarations.
解决方法：加上后缀.vue,js同理，都需要加上后缀, 总觉得应该是要配置什么loader，目前没有找到别的解决方法
4.安装ts-loader报错
Could not resolve dependency:peer webpack@"^5.0.0" from ts-loader@9.2.6
一般这种是版本过低，重新安装webpack对应的版本再安装ts-loader就行，安装less的时候也遇到了类似的报错，方法一样
5.配置路由报错
Property 'use' does not exist on type 'typeof import
This expression is not constructable
具体如图：
解决方法：
利用vue-router的api配置路由
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const index = () => import('../views/index/index.vue') // 首页
const nav2 = () => import('../views/nav2/nav2.vue') // nav2
const nav3 = () => import('../views/nav3/nav3.vue') // nav2
const routes:Array<RouteRecordRaw> = [
{
path: "",
name: "Index",
component: index,
},
{
path: "/nav2",
name: "nav2",
component: nav2
},
{
path: "/nav3",
name: "nav3",
component: nav3
},
];
export const router = createRouter({
history: createWebHashHistory(),
routes
});
最后在main.ts里引入
import {router} from './router'
const app = createApp(App)
app.use(router)
6.TypeError: this.getOptions is not a function
一般是项目中用了sass和less没有安装，npm install less less-loader --save 即可
7.Invalid options in babel.config.js: "publicPath" is not allowed
这个问题是我自己犯的低级错误，配置应该写在vue.config.js里
