Vue3+vite+TS

 一、搭建项目，下载依赖

下载vite ：npm init vite@latest  项目名，

下载依赖包：npm install

 二、配置路由

在src下创建router文件夹，在文件夹里创建index.js

下载路由依赖：npm install vue-router 

在文件里配置路由

• createRouter  创建路由模块
• createWebHistory  创建 路由模式
• RouteRecordRaw  增加路由对象类型限制，好处：允许在基础路由里面增加开发者自定义属性

import {createRouter ,createWebHistory ,RouteRecordRaw} from "vue-router"

 查找不到路由跳转的页面

 自定义路由类型 catchAll     (.*)匹配规则

 {
    path:'/:catchAll(.*)',//自定义路由类型 catchAll   (.*)匹配规则
    name:'404',
    component:()=>import("../views/404.vue")
  },

// createRouter 创建路由模块
// createWebHistory 创建 路由模式
// RouteRecordRaw 增加路由对象类型限制，好处：允许在基础路由里面增加开发者自定义属性
import {createRouter ,createWebHistory ,RouteRecordRaw} from "vue-router"
const routes:Array<RouteRecordRaw> = [
  {
    path:'/',
    name:'Home',
    component:()=>import("../views/Home.vue")
  },
  {
    path:'/register',
    name:'Register',
    component:()=>import("../views/Register.vue")
  },
  {
    path:'/:catchAll(.*)',//自定义路由类型 catchAll   (.*)匹配规则
    name:'404',
    component:()=>import("../views/404.vue")
  },
]

// 创建路由器
const router = createRouter({
  history:createWebHistory(),//创建路由模式为history
  routes:routes //引入路由表
})

export default router

配置完之后在main.ts里面进行配置

在App.vue中写  <router-view></router-view>

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')