vue3+ts 找不到vue-router模块
时间: 2023-08-20 18:07:19 浏览: 154
在 Vue 3 + TypeScript 中,你需要进行以下步骤来安装和使用 Vue Router:
1. 安装 Vue Router
```
npm install vue-router@next
```
2. 在 `src` 目录下创建 `shims-vue.d.ts` 文件,并在文件中添加以下代码:
```
declare module '*.vue' {
import { Component } from 'vue'
const component: ReturnType<typeof defineComponent>
export default component
}
```
3. 在 `src` 目录下创建 `router/index.ts` 文件,并在文件中添加以下代码:
```
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
4. 在 `main.ts` 文件中引入 `router`:
```
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
```
如果你还遇到了找不到 `vue` 模块的问题,可以尝试在 `tsconfig.json` 文件中添加以下配置:
```
{
"compilerOptions": {
"types": ["vite/client", "@vitejs/plugin-vue"],
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}
```
希望这些步骤可以帮到你!
阅读全文