vite + ts + vue3 + vue-router

1. 新建项目 yarn create vite
2. 引入vue-router yarn add vue-router@4
3. 配置路由文件

// src/router/index.ts
import { createRouter, createWebHashHistory, RouterOptions, Router, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  { path: '/', name: 'Home', component: () => import('../views/Home.vue') }
]

const options: RouterOptions = {
  history: createWebHashHistory(),
  routes
}

const router: Router = createRouter(options)

export default router

// main.ts
import { createApp } from 'vue'
import './style.css'
import router from '@/router'
import App from './App.vue'

createApp(App)
  .use(router)
  .mount('#app')
  
// app.vue
<template>
  <router-view></router-view>
</template>

4. 引入alias @

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

// 要使用path.resolve需要引入@types/node
yarn add @types/node -D

// 同事需要在tsconfig.json中进行配置
"compilerOptions": {
    ...,
    "paths": {
      "@/*": [ "./src/*" ]
    }
  },

5. 解决在路由里引入.vue文件时爆红提示模块引入错误问题

// 在根目录新建vue.d.ts文件
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
// 然后在tsconfig.json内进行配置
"include": [..., "vue.d.ts"]