00Vue3 + Vite + TypeScript + Element-Plus，第一个后台管理项目走向第3步：继续整合svg图标+scss+UnoCSS

在这个项目中，我们将继续上一节的内容，完成后台管理项目的第一个页面。

1. 创建一个新的页面组件。在 src/views 目录下创建一个名为 Dashboard.vue 的文件，并添加以下内容：

<template>
  <div class="dashboard-container">
    <h1>欢迎来到后台管理系统</h1>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'Dashboard',
});
</script>
 
<style scoped>
.dashboard-container {
  text-align: center;
  padding-top: 20px;
}
</style>

2. 在路由配置文件中添加对新页面的路由配置。打开 src/router/index.ts 文件，然后添加以下内容：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard,
  },
  // ...其他路由配置
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
 
export default router;

3. 在 src/main.ts 中引入 Element Plus 组件库：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
 
const app = createApp(App);
 
app.use(router);
app.use(ElementPlus);
 
app.mount('#app');

至此，我们已经完成了后台管理项目的第一个页面。在浏览器中访问 / 路径，你将看到一个简单的欢迎页面。在后续的教程中，我们将逐渐完善这个项目，添加更多的功能和页面。