用vue3+element-plus+ts生成一个404找不到页面的组件

首先，你需要安装 Vue3、Element Plus 和 TypeScript：

npm install vue@next element-plus ts-loader typescript -D

然后，在 `src` 目录下创建一个 `views` 目录，用于存放页面组件，再创建一个 `NotFound.vue` 组件：

<template>
  <div class="not-found">
    <h1>404 Not Found</h1>
  </div>
</template>

<style scoped>
.not-found {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  font-size: 5rem;
}
</style>

接着，在 `src` 目录下创建一个 `router` 目录，用于存放路由配置，再创建一个 `index.ts` 文件：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import NotFound from '@/views/NotFound.vue';

const routes: RouteRecordRaw[] = [
  {
    path: '/404',
    name: 'NotFound',
    component: NotFound,
  },
  // 除了上面的路由，其他路由全部重定向到 404 页面
  {
    path: '/:catchAll(.*)',
    redirect: '/404',
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

最后，在 `main.ts` 文件中引入路由：

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

createApp(App).use(router).mount('#app');

现在你就可以在应用中使用路由了，当用户访问一个不存在的页面时，就会显示 404 页面。