为了后续开发方便，在没有 UI 设计师配合的情况下，让我们的界面更加美观，我们使用 elementplus 组件库，并配置路由。

删除不需要的默认文件夹及文件，src 配置如下

实现效果

安装 elementplus,vue-router

npm install element-plus --save
npm install vue-router --save

• 在 main.js 中引入 element-plus

import {
    createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

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

• 创建 router 文件夹，并编写 index.js

//引入vue-router
import {
    createRouter, createWebHistory } from 'vue-router'

//引入组件
//引入vue-router
import {
    createRouter, createWebHistory } from 'vue-router'

//引入组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
//创建路由对象
const router = createRouter({
   
  history: createWebHistory(),
  routes: