这是一个使用Vue 3构建的单页面应用(SPA)，配置了路由功能。代码展示了如何创建Vue应用并设置三个路由页面：首页(HomePage)、新闻页(NewsPage)和关于页(AboutPage)。通过vue-router实现页面导航，使用RouterLink组件进行页面跳转，RouterView组件显示当前路由内容。应用包含基础CSS样式，主要内容区域设置了背景色和边框样式。整个示例演示了Vue 3的组合式API和路由配置的基本用法。

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import {createRouter, createWebHashHistory} from 'vue-router'
import HomePage from '@/pages/HomePage.vue'
import NewsPage from '@/pages/NewsPage.vue'
import AboutPage from '@/pages/AboutPage.vue'
// 规则
const routers =[
    {path:"/",component:HomePage},
    {path:"/home",component:HomePage},
    {path:"/news",component:NewsPage,name:'news'},
    {path:"/about",component:AboutPage}
]
// 建立
const router = createRouter({
    history: createWebHashHistory(),
    routes: routers
})

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

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <RouterLink to="/home">首页</RouterLink>
      <RouterLink :to="{path:'about'}">关于</RouterLink>
      <RouterLink :to="{name:'news'}">新闻</RouterLink>      
    </p>
    <div class="content">    
      <RouterView></RouterView>
    </div>
  </div>
</template>


<!-- vue3 写法  -->
<script lang="ts" setup>
</script>

<style>
a{
  margin:  10px;
 }
 .content{
  background:yellowgreen;
  windows: 10px;
  height: 400px;
  border: 1cap;
  border-radius: 10px;
 }
</style>